/* Cacho Doiro CSS Personalizado */
html, body{
height: 100%;
width: 100%;
font-family: 'Helvetica Neue', sans-serif !important;
background-color: #efefef;
}
/* Botão Primary */
.hero .btn-primary{
background-color: #2b2b2b !important;
border-color: #2b2b2b !important;
text-decoration: none !important;
height: 50px;
width: 200px;
font-size: 18px ;
}
.hero .btn-primary:hover{
background-color: #ffffff !important;
color: #2b2b2b !important;
border-color: #2b2b2b !important;
}
.hero .btn:focus, .btn:active {
box-shadow: none !important;
}
/* Menu */
#menu-container{
width:100%;
margin: 0 auto;
}
header{
background: #2e2e2e;
color: #EBEBD3;
padding: 1.5em 0;
position: relative;
height: 70px;
font-size:16px;
}
header::after{
content:'';
clear: both;
display: block;
}
.logo{
float: left;
margin: 0;
font-size: 24px;
margin-top: -0.4em;
}
.site-nav{
position: absolute;
top: 100%;
right: 0%;
background: #2e2e2e;
height: 0px;
overflow: hidden;
}
.site-nav--open{
height: auto;
width: 100%;
z-index: 9999;
margin-top: -13px;
}
.site-nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.site-nav li{
border-bottom: 1px solid #ffffff;
}
.site-nav li:last-child{
border-bottom: none;
}
.site-nav a{
color: white;
display: block;
padding: 2em 6em;
text-transform: uppercase;
text-decoration: none;
text-align:center;
}
.site-nav a:hover{
text-decoration: none;
color: white;
}
.site-nav a:focus{
background: white;
color: #2b2b2b;
}
.menu-toggle{
padding: 1em;
position: absolute;
top: 1em;
right: .5em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after{
content:'';
display: block;
background: white;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: all ease-in-out 500ms;
}
.hamburger::before{
transform: translateY(-6px);
}
.hamburger::after{
transform: translateY(3px);
}
.open .hamburger{
transform: rotate(45deg);
}
.open .hamburger::before{
opacity: 0;
}
.open .hamburger::after{
transform: translateY(-3px) rotate(-90deg);
}
@media(min-width: 1023px){
#menu-container{
position: absolute !important;
z-index: 9999 !important;
}
.site-nav a:focus{
background: white;
color: white;
}
.menu-toggle{
display:none;
}
.site-nav{
height: auto;
position: relative;
background: transparent;
float:right;
}
.site-nav li{
display: inline-block;
border: none;
}
.site-nav a{
padding: 0;
margin-left: 3em;
}
.site-nav a:hover, .site-nav a:focus{
background: transparent;
}
header{
padding: 1.9em 0 !important;
font-size:14px !important;
}
.logo{
margin-top: -0.4em !important;
}
.site-nav{
margin-right: 2em !important;
}
}
.logo a{
text-decoration: none;
color: white;
}
.logo a:hover{
text-decoration: none;
color: white;
}
.scroll{
top: 0;
width: 100%;
z-index: 999999999;
position: fixed;
}
.scroll.black {
top: 0;
background: rgba(0,0,0,0.8) !important;
height: 80px !important;
padding: 10 50px !important;
z-index: 99999 !important;
color: red !important;
}
/* Hero */
.hero{
background-image: url('../../assets/images/hero_home.jpg');
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin-top: -90px;
position: relative;
}
.hero > h1{
color: #ffffff;
padding-top: 40px;
font-size: 55px;
}
/* Header Pages */
.header_pages{
background-image: url('../../assets/images/header_pages.jpg');
background-size: cover;
background-position: center;
height: 70%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin-top: -90px;
position: relative;
}
/* Sobre Nós */
.container .titulo_sobre{
padding-top: 30px;
padding-bottom: 30px;
text-align: center;
}
/* Sobre Nós - Botão Saber Mais */
#botao_centrado{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 30px;
padding-bottom: 50px;
}
#sobre_nos p{
margin-left: 15%;
margin-right: 15%;
text-align: center;
font-size: 16px;
}
#sobre_nos .btn-primary{
background-color: #2b2b2b !important;
border-color: #2b2b2b !important;
text-decoration: none !important;
height: 40px !important;
width: 170px !important;
font-size: 14px !important;
}
#sobre_nos .btn-primary:hover{
background-color: #ffffff !important;
color: #2b2b2b !important;
border-color: #2b2b2b !important;
}
#sobre_nos .btn:focus, .btn:active {
box-shadow: none !important;
}
/* Sugestão do Chef */
#sugestaoChef{
padding-bottom: 40px;
}
.container .titulo_sugestao{
padding-top: 30px;
padding-bottom: 40px;
text-align: center;
}
#sugestaoChef > .col-md-4 > .sugestao_01{
background-image: url('../../assets/images/cabrito_assado.jpg');
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 350px;
width: 100%;
margin-bottom: 30px;
}
#sugestaoChef > .col-md-4 > .sugestao_02{
background-image: url('../../assets/images/bacalhau_assado.jpg');
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 350px;
width: 100%;
margin-bottom: 30px;
}
#sugestaoChef > .col-md-4 > .sugestao_03{
background-image: url('../../assets/images/polvo_assado.jpg');
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 350px;
width: 100%;
margin-bottom: 30px;
}
#sugestaoChef > .col-md-4 h2{
color: #ffffff;
cursor: default;
text-shadow: 2.5px 1px #2b2b2b;
}
/* Slideshow */
#myCarousel{
height: 250px;
margin-top: -20px;
margin-bottom: 30px;
}
/* Slideshow - Titulo -> Testemunhos */
#carousel h1{
text-align: center;
padding-top: 30px;
}
/* Slideshow - cor das setas*/
#myCarousel a:hover{
background-color: transparent;
}
/* Slideshow Imagem */
#myCarousel .avatar{
background-image: url("../../assets/images/avatar_no_photo.jpg");
height: 125px;
width: 125px;
float: left;
/* margin-left: 20%; */
display: inline-block;
border-radius: 25px;
margin-right: 50px;
margin-left: 152px;
margin-top: 40px;
}
/* Slideshow - Texto*/
#myCarousel h5{
padding-top: 70px;
width: 90%;
height: 50px;
}
#myCarousel .autor{
text-align: center;
padding-right: 19%;
margin-top: -12px;
}
/* SlideShow- Controllers */
#myCarousel .carousel-control.left{
width: 50px;
background-image: none;
margin-bottom: 50px;
}
#myCarousel .carousel-control.right{
width: 50px;
background-image: none;
margin-bottom: 50px;
}
/* Fotos com hiperligação */
/* Titulo */
.container .nosso_espaco_titulo{
text-align: center;
}
.container .nosso_espaco_titulo h1{
padding-top: 30px;
padding-bottom: 30px;
margin-bottom:30px;
}
#nosso_espaco_fotos > #imagem_01, #imagem_02, #imagem_03, #imagem_04, #imagem_05, #imagem_06{
display: inline-block !important;
float: left;
color: #ffffff;
}
/* Imagem 01 */
#nosso_espaco_fotos > #imagem_01 {
background-image: url('../../assets/images/home_galeria/black_white/img_01.jpg');
background-size: cover;
background-position: center;
height: 350px;
width: 33.3%;
}
#imagem_01 .overlay{
/* background: rgba(0,0,0,0.5); */
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
#imagem_01 .overlay:hover{
background-image: url('../../assets/images/home_galeria/cores/img_01.jpg');
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
/* Imagem 02 */
#nosso_espaco_fotos > #imagem_02 {
background-image: url('../../assets/images/home_galeria/black_white/img_02.jpg');
background-size: cover;
background-position: center;
height: 350px;
width: 33.3%;
}
#imagem_02 .overlay{
/* background: rgba(0,0,0,0.5); */
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: white;
}
#imagem_02 .overlay:hover{
background-image: url('../../assets/images/home_galeria/cores/img_02.jpg');
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
/* Imagem 03 */
#nosso_espaco_fotos > #imagem_03 {
background-image: url('../../assets/images/home_galeria/black_white/img_03.jpg');
background-size: cover;
background-position: center;
height: 350px;
width: 33.3%;
}
#imagem_03 .overlay{
/* background: rgba(0,0,0,0.5); */
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
#imagem_03 .overlay:hover{
background-image: url('../../assets/images/home_galeria/cores/img_03.jpg');
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
/* Imagem 04 */
#nosso_espaco_fotos > #imagem_04 {
background-image: url('../../assets/images/home_galeria/black_white/img_04.jpg');
background-size: cover;
background-position: center;
height: 350px;
width: 33.3%;
}
#imagem_04 .overlay{
/* background: rgba(0,0,0,0.5); */
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
#imagem_04 .overlay:hover{
background-image: url('../../assets/images/home_galeria/cores/img_04.jpg');
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
/* Imagem 05 */
#nosso_espaco_fotos > #imagem_05 {
background-image: url('../../assets/images/home_galeria/black_white/img_05.jpg');
background-size: cover;
background-position: center;
height: 350px;
width: 33.3%;
}
#imagem_05 .overlay{
/* background: rgba(0,0,0,0.5); */
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: white;
}
#imagem_05 .overlay:hover{
background-image: url('../../assets/images/home_galeria/cores/img_05.jpg');
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
/* Imagem 06 */
#nosso_espaco_fotos > #imagem_06 {
background-image: url('../../assets/images/home_galeria/black_white/img_06.jpg');
background-size: cover;
background-position: center;
height: 350px;
width: 33.3%;
}
#imagem_06 .overlay{
/* background: rgba(0,0,0,0.5); */
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
#imagem_06 .overlay:hover{
background-image: url('../../assets/images/home_galeria/cores/img_06.jpg');
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
/* Cor das Sections */
.fundo_section_1, .fundo_section_2{
background-color: white;
}
/* Footer */
#footer{
background-color: #2b2b2b;
padding: 30px !important;
text-align: center;
}
#footer .row{
color: white !important;
}
#footer .fa-tripadvisor{
margin-left: 10px !important;
margin-top: 10px !important ;
}
#footer .fa-facebook-square{
margin-right: 10px !important;
}
#footer .fa-tripadvisor:hover{
color:#00af87 !important;
}
#footer .fa-facebook-square:hover{
color:#3b5998 !important;
}
#footer a{
color: white !important;
}
/* CARDÁPIO */
#botao_cardapio{
color: black;
border-color: transparent;
background-color: transparent;
border-bottom-color: black;
}
#botao_cardapio:hover{
background-color: #2b2b2b;
color: white;
}
#items{
text-align: center;
}
#items h1{
padding-top: 30px;
padding-bottom: 15px;
text-align: center;
background-color: #efefef;
}
#items h4{
font-size: 14px !important;
padding-bottom: 10px;
}
#items h3{
padding-bottom: 10px;
}
.col-sm-12{
padding-top: 30px;
}
.col-sm-6{
padding-bottom: 30px;
}
.well{
text-align:center;
padding: 10px;
margin-bottom: 10px;
}
/* VINHOS */
#quem_somos .titulo_quem_somos{
padding-top: 30px;
padding-bottom: 30px;
text-align: center;
background-color: #efefef;
}
#quem_somos{
background-color: #efefef;
}
#quem_somos p{
padding-bottom: 50px;
text-align:center;
margin-right: 15%;
margin-left: 15%;
font-size: 16px;
}
#quem_somos .citacao_miguel_torga{
padding-bottom: 50px;
text-align:center;
font-size: 14px;
}
.grid_galeria{
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column_01 {
-ms-flex: 25%; /* IE10 */
flex: 25%; /* Para aumentar, tem de se apagar uma coluna (25% = 1/4 100%) e meter a 33% */
max-width: 25%; /* Para aumentar, tem de se apagar uma coluna (25% = 1/4 100%) e meter a 33% */
padding: 0 4px;
margin-left: auto;
}
.column_01 img {
margin-top: 8px;
vertical-align: middle;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column_01 {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Segunda Coluna */
.column_02 {
-ms-flex: 25%; /* IE10 */
flex: 25%; /* Para aumentar, tem de se apagar uma coluna (25% = 1/4 100%) e meter a 33% */
max-width: 25%; /* Para aumentar, tem de se apagar uma coluna (25% = 1/4 100%) e meter a 33% */
padding: 0 4px;
margin-right: auto;
}
.column_02 img {
margin-top: 8px;
vertical-align: middle;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column_02 {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* O NOSSO ESPAÇO */
.bgbox{
position:fixed;
left:0;
top:0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: none;
}
.divbox{
position: fixed;
left:50%;
top: 50%;
width: 700px;
height: 400px;
background-color: white;
margin-left: -350px;
margin-top: -200px;
display: none;
}
.divbox img{
width: 100%;
height: 100%;
}
.grid_galeria{
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%; /* Para aumentar, tem de se apagar uma coluna (25% = 1/4 100%) e meter a 33% */
max-width: 25%; /* Para aumentar, tem de se apagar uma coluna (25% = 1/4 100%) e meter a 33% */
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
.grid_galeria .btn-primary{
background-color: #2b2b2b !important;
border-color: #2b2b2b !important;
text-decoration: none !important;
height: 50px !important;
width: 200px !important;
font-size: 18px !important;
margin-top: 10px;
}
.grid_galeria .btn-primary:hover{
background-color: #ffffff !important;
color: #2b2b2b !important;
border-color: #2b2b2b !important;
}
.grid_galeria .btn:focus, .btn:active {
box-shadow: none !important;
}
#galeria .titulo_galeria{
padding-top: 30px;
padding-bottom: 30px;
text-align: center;
background-color: #efefef;
}
#galeria{
background-color: #efefef;
width: 100%;
}
/* QUEM SOMOS */
#quem_somos{
background-color: #efefef;
}
#quem_somos p{
padding-bottom: 30px;
}
.parallax {
/* The image used */
background-image: url('../../assets/images/quem_somos.jpg');
/* Full height */
height: 50%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax_02 {
/* The image used */
background-image: url('../../assets/images/quem_somos_02.jpg');
/* Full height */
height: 50%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#michelin{
background-image: url('../../assets/images/michelin.png');
height: 140px;
margin-top: 20px;
margin-bottom: 20px;
}
#exemplo p{
padding-top: 30px;
text-align:center;
padding-bottom: 30px;
margin-left: 15%;
margin-right: 15%;
font-size: 16px;
}
/* CONTACTOS */
#iconRow{
padding: 30px 0;
}
#formContainer{
width: 100%;
padding-bottom:70px;
}
#formContainer > #formRow #mapa{
width: 100%;
height: 500px;
}
#formContainer .btn-primary{
background-color: #2b2b2b !important;
border-color: #2b2b2b !important;
text-decoration: none !important;
height: 50px !important;
width: 200px !important;
font-size: 18px !important;
margin-top: 25px;
}
#formContainer .btn-primary:hover{
background-color: #ffffff !important;
color: #2b2b2b !important;
border-color: #2b2b2b !important;
}
#formContainer .btn:focus, .btn:active {
box-shadow: none !important;
}
/* Media Querys */
/* Mobile */
@media only screen
and (min-width : 300px)
and (max-width : 425px){
/* Text Size: */
h1{
font-size: 24px;
}
h2{
font-size: 22px !important;
}
h3{
font-size: 20px !important;
}
h4{
font-size: 18px !important;
}
h5{
font-size: 16px !important;
}
h6{
font-size: 14px !important;
}
/* Texto Hero */
.hero > h1{
font-size: 35px !important;
}
.hero .btn-primary{
width: 200px !important;
font-size: 14px !important;
height: 40px !important;
margin-top: 10px;
}
/* Sobre_nos - Home */
#sobre_nos h4{
font-size: 16px !important;
margin-left: 5%;
margin-right: 5%;
text-align: center;
}
/* Sugestão do chef */
#sugestaoChef > .col-md-4 h2{
font-size: 30px !important;
}
/* SlideShow */
#myCarousel h5{
padding-top: 60px !important;
width: 90% !important;
padding-left: 50px !important;
margin-bottom: 10px !important;
height: 100px !important;
}
#carousel h1{
margin-bottom: -40px !important;
}
#myCarousel .avatar{
background-image: none !important ;
border-radius: 0px !important;
height: 0px !important;
width: 0px !important;
}
#myCarousel{
height: 330px !important;
}
#myCarousel .autor{
padding-right: 5% !important;
margin-top: 80px !important;
}
/* Galeria de baixo */
#nosso_espaco_fotos > #imagem_01, #imagem_02, #imagem_03, #imagem_04, #imagem_05, #imagem_06{
display: block !important;
float: none !important;
width: 100% !important;
}
#nosso_espaco_fotos > #imagem_01 {
background-image: url('../../assets/images/home_galeria/cores/img_01.jpg');
}
#nosso_espaco_fotos > #imagem_02 {
background-image: url('../../assets/images/home_galeria/cores/img_02.jpg');
}
#nosso_espaco_fotos > #imagem_03 {
background-image: url('../../assets/images/home_galeria/cores/img_03.jpg');
}
#nosso_espaco_fotos > #imagem_04 {
background-image: url('../../assets/images/home_galeria/cores/img_04.jpg');
}
#nosso_espaco_fotos > #imagem_05 {
background-image: url('../../assets/images/home_galeria/cores/img_05.jpg');
}
#nosso_espaco_fotos > #imagem_06 {
background-image: url('../../assets/images/home_galeria/cores/img_06.jpg');
}
#galeria .titulo_galeria{
padding-top: 30px !important;
}
/* Vinhos e Quem_Somos têm a mesma classe no texto */
#quem_somos .titulo_quem_somos{
padding-top: 30px !important;
}
#quem_somos p{
margin-left: 5%;
margin-right: 5%;
text-align: center;
font-size: 16px;
}
#exemplo p{
padding-top: 30px;
padding-bottom: 30px;
margin-left: 5% !important;
margin-right: 5% !important;
}
/* Nosso espaço - alteração do pop-up da galeria */
.divbox{
width: 400px;
height: 250px;
margin-left: -200px;
margin-top: -150px;
}
/* Página Quem somos - guia michelin */
#michelin{
background-image: url('../../assets/images/michelin_mobile.png');
height: 460px;
margin-top: 20px;
margin-bottom: 20px;
width: 320px;
}
/* Página Contactos */
#formContainer > #formRow #mapa{
margin-top: 50px;
}
#iconRow{
padding-top: 30px !important;
}
#iconRow .col-md-4{
padding-top: 20px;
}
#imagem_06 .overlay{
margin-top: -30px;
}
#items h1{
padding-top: 30px !important;
}
}
/* Ecrão 13 polegadas */
@media only screen
and (min-width : 1020px)
and (max-width : 1350px){
header{
padding: 2.5em 0 !important;
font-size: 11px !important;
}
/* Página Quem somos - guia michelin */
#michelin{
background-image: url('../../assets/images/michelin13.png');
height: 100px !important;
width: 835px !important;
}
}
/* Tablet */
@media only screen
and (min-width : 700px)
and (max-width : 1020px){
#myCarousel .avatar{
margin-left: 60px !important;
}
#myCarousel h5{
height: 95px !important;
}
#iconRow .col-md-4{
padding-bottom: 20px !important;
}
#formRow .col-md-6{
padding-bottom: 70px !important;
}
.well h4{
font-size: 10px !important;
}
header{
font-size: 14px !important;
}
/* Página Quem somos - guia michelin */
#michelin{
background-image: url('../../assets/images/michelinTablet.png');
height: 77px !important;
width: 642px !important;
}
}
/* Cardapio diminuir letra para tablet e 13 polegadas */
@media only screen
and (min-width : 1000px)
and (max-width : 1400px){
.well h4{
font-size: 14px !important;
}
}