/*
Theme Name: Grela Child
Theme URI: https://www.hostalrestaurantegrela.com
Author: veovirtual.com
Author URI: https://www.veovirtual.com
Template: grela
Version: 231123
*/
.the_content_wrapper {margin: 0; width:100%;}
.has_content .the_content_wrapper {margin-bottom: 0px;}
.caja {max-width:1240px; margin:0 auto;}

/* Botones */
.wp-block-button.is-style-outline a{border-color:#000; color:#000; transition:all .3s ease-in-out;}
.wp-block-button.is-style-outline a:hover{background-color:#f2643d !important; border-color:#f2643d !important; color:#fff !important; text-decoration:none;}
.button-stroke .button{border-radius:7px;}
.button-stroke .button:hover { background-color: #f1653e; color: #fff;border-color: #f1653e;}
.boton-blanco a { cursor: pointer;transition:all .3s ease-in-out;background-color:#fff!important; border-color:#f2643d!important; color:#f2643d!important; text-decoration:none;padding:15px 25px;border-radius:7px;display:inline-block;width:auto;}
.boton-blanco a:hover { transition:all .3s ease-in-out;background-color:#f1653e!important; border-color:#f1653e!important; color:#fff!important;}
a.boton-color {cursor: pointer;transition: all .3s ease-in-out; background-color: #f2643d!important; border-color: #f2643d!important; color: #fff!important; text-decoration: none; border-radius: 7px;    width: 197px; padding: 15px 25px; margin: 0 auto; display: inline-block; text-align: center; justify-content: center;}

/*Reseteos*/
.wp-gr.wp-dark .wp-google-text {  color: #000000!important;}
.wp-gr.wpac.wp-dark .wp-google-name a { color: #000!important;}
.google-map-contact-wrapper .get_in_touch {  width: 480px;}
#mapa-inicio .mcb-column-inner {  margin: 0;}
.sticky-dark #Top_bar.is-sticky, .sticky-dark #Top_bar.is-sticky #menu { background: rgb(0 0 0);}
.wp-block-separator {  border: 0px solid;  background-color: rgb(0 0 0 / 10%);}
/* Quitar botón recaptcha V3 de Google */
.grecaptcha-badge { visibility: hidden !important; }

/* Header */
body #Header #Top_bar .container, body #Header .container{padding-left:3%; padding-right:3%;}
#Header #Top_bar:not(.is-sticky) .menu > li > a {padding: 10px 0 0;}
.sticky-dark #Top_bar.is-sticky{background: rgb(0 0 0 / 77%);}
#Header #Action_bar{padding:10px 0;}
#Top_bar .menu > li > a span:not(.description){padding:0 17px;}
#Top_bar #menu a span i{margin-right:5px;}
#Top_bar .menu > li.boton-menu-contacto > a, #Top_bar .menu > li.boton-menu-contacto > a:hover{color:#fff;}
#Top_bar .boton-menu-contacto a::after{display:none;}
#Top_bar .boton-menu-contacto a span{background-color:#f2643d; border-radius:9px; transition:all .3s ease-in-out;}
#Top_bar .boton-menu-contacto a span:hover{background-color:#c9370f;}
#Header #Top_bar.is-sticky .boton-menu-contacto a{padding:5px 0;}
#Header #Top_bar.is-sticky .boton-menu-contacto a span{padding-top: 10px; padding-bottom: 10px;}
#Subheader {  background-color: #7b5040;}

/*Inicio*/
#video-inicio h1 {font-size:3em;}
#hostal-inicio h2 { font-size: 4em;  line-height: 1.2em;  color: #f26843;}
#hostal-inicio .content_slider {  padding: 0 75px;}

#cabecera-video .wp-block-cover{padding:150px 0 200px;}

#banners-inicio{background-image:url(https://www.hostalrestaurantegrela.com/imagenes/fondo-banners-inicio.png); background-repeat:no-repeat; background-position:top left; background-size:contain; margin-top:-100px; position:relative; z-index:1; padding:0 1% 1% 60px;}
#banners-inicio > div {display:flex; gap:20px; min-height:603px;}
#banners-inicio .banner-texto{width:25%; margin:75px 2% 2% 2%;}
#banners-inicio .banner-texto h2, #banners-inicio .banner-texto h3{color:#fff;}
#banners-inicio .raya-vertical{width: 3px; height: 100px; background: #f8a994; margin-bottom:15px;}
#banners-inicio .banner-texto > div {height: 100%; display: flex; flex-direction: column; justify-content: space-between;}
#banners-inicio .banners{width:75%; margin-top:75px;}
#banners-inicio .banners a{display: inline-grid;}
#banners-inicio .banners a:hover{text-decoration:none;}
#banners-inicio .banners a span{width:100%; height:80px; text-align:center; color:#fff; font-size:2em; line-height:1.3em; font-weight:600; display: flex; align-items: center; justify-content: center; transition:all .3s ease-in-out; margin-top:-80px;}
#banners-inicio .banners a:hover span{background-color:#f2643d;}
#banners-inicio .banners ul{list-style:none; margin:0; display:flex; gap:20px;}
#banners-inicio .banners ul li{flex:1;}

#review-inicio {padding:60px 3% 30px}

#novedades-inicio {padding:10px 3% 60px; text-align:center;max-width:1440px;margin:0 auto;}
#novedades-inicio .post-meta {display:none;}
#novedades-inicio .post-links {display:none;}

#hostal-inicio {background-image:url(https://www.hostalrestaurantegrela.com/wp-content/uploads/2023/11/fondo-hostal-inicio.jpg#134);padding:120px 3% 120px;background-attachment:fixed;}
#hostal-inicio .wp-block-columns {display: flex;flex-direction: row;flex-wrap: nowrap; align-items: center!important;}
#hostal-inicio h3, #hostal-inicio h5 {color:#fff;}

#restaurante-inicio {background-image:url(https://www.hostalrestaurantegrela.com/wp-content/uploads/2023/11/fondo-restaurante-inicio-1.jpg#171);padding:120px 9% 120px;background-attachment:fixed; background-position: right top;}
#restaurante-inicio a {text-decoration:none;}
#restaurante-inicio a:hover {text-decoration:none;}
#restaurante-inicio h4 { padding: 40px 7%; background: #f1653e; text-align: center!important; margin: -15px 0!important;transition:0.5s;}
#restaurante-inicio h4:hover { background: #c34b29;transition:0.5s; }
#restaurante-inicio	.wp-block-columns {display: flex;flex-direction: row;flex-wrap: nowrap; align-items: center!important;}

#entorno-inicio {background-image:url(https://www.hostalrestaurantegrela.com/wp-content/uploads/2023/11/galeria-entorno-inicio.jpg);padding:120px 9% 120px;background-repeat:no-repeat;background-position:center;background-size:cover;}
#entorno-inicio .wp-block-group__inner-container {max-width:1000px; background: #3e3b34ab;padding: 40px;}
#entorno-inicio h2 {color:#fff;}
#entorno-inicio p, #entorno-inicio h5 {color:#fff;}

#instagram-inicio{padding:3%;}

/*hotel*/
#portada-hotel .content_slider.center .content_slider_ul li:not(.slick-center) { transform: scale(1);}
#contenido-hotel {padding:80px 3% 0;max-width:1000px;margin:0 auto;    text-align: center;}
#contenido-hotel ul {list-style: none;display: flex; flex-wrap: wrap; justify-content: center;  align-items: stretch; flex-direction: row;  text-align: center; align-content: center;gap: 5px 15px;    margin: 0;}
#contenido-hotel li {color: #fff;width: 32%; background: #f26943;  padding: 35px; display: flex; align-content: center; align-items: center; justify-content: center;}

#servicios-hotel {padding:0px 3% 80px;max-width:1400px;margin:0 auto;}
#servicios-hotel li {color: #000; width: 29%; background: #f2694300; padding: 15px; display: flex; align-content: center; justify-content: flex-start; line-height: 1.2em; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; font-size: 1.2em; align-items: center;flex-direction: column;}
#servicios-hotel li:before {color: #f26943; font-size: 2em; display: block;padding: 10px;}
	#servicios-hotel li:nth-child(1)::before{content: "\f236";font-family: "FontAwesome";}
	#servicios-hotel li:nth-child(2)::before{content: "\f2cd";font-family: "FontAwesome";}
	#servicios-hotel li:nth-child(3)::before{content: "\f26c";font-family: "FontAwesome";}
	#servicios-hotel li:nth-child(4)::before{content: "\f2c7";font-family: "FontAwesome";}
	#servicios-hotel li:nth-child(5)::before{content: "\f2dc";font-family: "FontAwesome";}
	#servicios-hotel li:nth-child(6)::before{content: "\f058";font-family: "FontAwesome";}
#servicios-hotel li:nth-child(4), #servicios-hotel li:nth-child(5), #servicios-hotel li:nth-child(6), #servicios-hotel li:nth-child(7), #servicios-hotel li:nth-child(8), #servicios-hotel li:nth-child(9) {border-top:0px solid transparent; padding: 0px 15px 20px;}
#servicios-hotel ul {margin: 0;text-align: center;list-style: none;display: flex; flex-wrap: wrap; justify-content: center;  align-items: stretch; flex-direction: row; align-content: center;gap: 5px 15px;}
#servicios-hotel ul em {display:block;font-size: 0.8em; line-height: 1.1em;color:#888888;padding: 4px;}

#habitaciones-tipo {padding:0px 3% 80px;margin:0 auto;}
#habitaciones-tipo figure {  object-fit: cover; height: 185px;display: inline-block;padding: 5px;}
#habitaciones-tipo figure img {border-radius: 8px;transition:0.3s;}
#habitaciones-tipo figure img:hover {border-radius: 8px; transform:scale(0.97);transition:0.3s;}

/*restaurante*/
#portada-restaurante .slick-slide img { object-fit: cover;  width: 100%;  height:570px;}

#servicios-restaurante h4{font-size: 2.4em; line-height: 1.3em; margin-bottom: 25px; text-transform: uppercase; letter-spacing: 0.04em; color: #796c69;}
ul#lista-servicios{list-style: none; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); color: #000; gap:20px; justify-content:center;}
ul#lista-servicios li{display:flex; flex-direction:column; align-items:center; border:solid 1px #c5c5c5; border-radius:10px; padding:5%; font-size:1.3em; line-height:1.45em; text-align:center;}
ul#lista-servicios li p{margin: 0 0 5px;}
ul#lista-servicios li b{border-bottom: solid 3px #f37200;}
ul#lista-servicios li i{font-size:4em;}
ul#lista-servicios li span{font-size:0.75em; line-height:1.3em;}

#servicios-restaurante {padding:0px 3% 80px;max-width:1400px;margin:0 auto;}

/*Entorno*/
#portada-entorno .content_slider.center .content_slider_ul li:not(.slick-center) { transform: scale(1);}
#portada-entorno .slick-slide img { object-fit: cover;  width: 100%;  height:570px;}
#contenido-entorno {padding:80px 3% 0;max-width:1450px;margin:0 auto;    text-align: center;}

/*Blog*/
#contenido-blog {padding:40px 3% 40px;max-width:1450px;margin:0 auto;    text-align: center;}
#contenido-blog .author-date, #contenido-blog .post-footer {display:none;}
.Recent_posts ul li .desc .date { font-size: 0.9em; line-height: 1em;}
.single-post .post-header {display:none;}

/* Footer */
#Footer .widget{text-align:center;}
.footer-direccion{padding: 2%; border: solid 1px #ff6b40;  border-radius: 10px;}
#Footer .footer-restaurante a{color: #fff; background-color: #ff6b40; padding: 10px 20px; display: inline-block; border-radius: 9px; font-size: 1.2em; line-height: 1.3em; transition:all .3s ease-in-out;}
#Footer .footer-restaurante a:hover{text-decoration:none; color:#fff; background-color:#d33a0e;}
#contactobar {display:none;}
.footer_copy .container { max-width: 90%;}

/*menu responsive*/
	#Side_slide #menu ul { width: 100%!important;  padding-top: 89px;  background-image: url(https://www.hostalrestaurantegrela.com/imagenes/logo-grela.png);  background-repeat: no-repeat;
    background-size: 170px; background-position: center top; margin-top: -29px;}
	#Side_slide { background-color: #ffffff;}
	#Side_slide #menu ul li.current-menu-item > a, #Side_slide #menu ul li.current_page_item > a, #Side_slide #menu ul li.current-menu-parent > a, #Side_slide #menu ul li.current-page-parent > a, #Side_slide #menu ul li.current-menu-ancestor > a, #Side_slide #menu ul li.current-page-ancestor > a, #Side_slide #menu ul li.current_page_ancestor > a, #Side_slide #menu ul li.hover > a, #Side_slide #menu ul li:hover > a, #Side_slide #menu ul li > a { color: #3c3c3c; font-weight: 600;}
	#Side_slide #menu ul li a { padding: 10px 10px 10px 20px; margin-right: 0; text-align: left; font-size: 1.3em; line-height: 1.2em;font-weight: 400;}
	#Side_slide #menu ul li a i:before { padding-right:9px;}
	#body_overlay { background: rgb(0 0 0 / 71%); z-index: 99999;}
	#Side_slide .extras { margin-top: 0px; z-index: 999999;  position: relative;   width: 212px;}
	#Side_slide .social-menu li.menu-item { font-size: 1.2em;  padding: 10px 10px;  border-bottom: 1px solid #0000001f;  width: 100%;  float: left;  border-left: 1px solid #d6d6d6;   margin: 0 auto;}
	#Side_slide .social-menu li.menu-item a { color: #000; font-weight: 400; line-height: 2em;}

/*Cookies*/
.button-custom button:hover{background-color:transparent;}
.cky-footer-wrapper div[data-cky-tag="detail-powered-by"]{display:none !important; }
.cky-show-desc-btn, .cky-accordion-header .cky-always-active {color: #E9420F !important; }
.cky-banner-element{cursor:pointer;} 


@media only screen and (min-width: 1240px){
	#Content .section_wrapper{max-width:inherit;}
	#Top_bar:not(.is-sticky) #menu .menu > li > a:not(.menu-toggle)::after {height: 2px; margin-top: 24px;}
}
@media only screen and (max-width: 1239px){
	#Header #Action_bar .container .column{display:flex; justify-content:center;}	
}
@media only screen and (min-width: 960px){
	#Top_bar .top_bar_left::before, #Top_bar .top_bar_left::after{display:none;}
	#Top_bar .top_bar_left{display: flex; justify-content: center;}
	.logo-main{margin-top:-13px;}
	#Top_bar:not(.is-sticky) .logo{margin-top:-30px;}

}
@media only screen and (max-width: 1035px){
	#Top_bar a.responsive-menu-toggle{margin-top: -20px; width: 64px; height: 64px; border-radius: 35px;}
	#Top_bar a.responsive-menu-toggle i {font-size: 29px; line-height: 64px;}
	#Top_bar .logo {float: inherit; margin: 0; width: 100%; text-align: center;}
}

@media only screen and (min-width: 960px) and (max-width: 1239px){
	#Content .section_wrapper{max-width:inherit;}
	.caja{max-width:940px; margin:0 auto;}
	#Top_bar:not(.is-sticky) .logo{margin-top:10px;}
	#Top_bar:not(.is-sticky) .top_bar_left {display: flex; justify-content: center; flex-direction: column; align-items: center; margin-bottom:13px;}
	
	#banners-inicio{max-width:inherit; background-position:0 -70px;}
	#banners-inicio > div {min-height:496px; align-items:flex-end;}
	#banners-inicio .banner-texto {width: 35%;}
	#banners-inicio .raya-vertical{height:47px;}
	#banners-inicio .banners {width: 65%;}
}

@media only screen and (min-width: 768px) and (max-width: 959px){
	#Content .section_wrapper{max-width:inherit;}
	.caja{max-width:708px; margin:0 auto;}
	#Header #Top_bar:not(.is-sticky) .logo {height: 136px;}
	.logo-main{margin-top:12px;}
}

@media only screen and (max-width: 960px){
	#cabecera-video img { display:none;}
	#cabecera-video .wp-block-cover {  padding: 110px 4% 95px;}
	#Top_bar .menu_wrapper {  display: none;}
	
	#banners-inicio{max-width:inherit; background-image:none; padding: 0 3%;}
	#banners-inicio > div {min-height:inherit; flex-direction: column; align-items: center;}
	#banners-inicio .banners{margin-top:0;}
	#banners-inicio .banner-texto, #banners-inicio .banners {width: 100%;}
	#banners-inicio .banner-texto{text-align:center;}
	#banners-inicio .banner-texto h2{font-size:3em; line-height:1.3em;}
	#banners-inicio .banner-texto h3{font-size:2em; line-height:1.3em;}
	#banners-inicio .banner-texto p{font-size:1.35em; line-height:1.3em; padding:0 3%;}
	#banners-inicio .banner-texto .titulo-slogan{background-image:url(https://www.hostalrestaurantegrela.com/imagenes/fondo-banners-inicio.jpg); background-repeat:no-repeat; background-position:center; background-size:cover; padding:4%; margin-bottom:20px;}
	#banners-inicio .raya-vertical{display:none;}
	#banners-inicio .wp-block-buttons{justify-content:center;}
	#banners-inicio .wp-block-buttons a{font-size:1.4em; line-height:1.2em;}

	#hostal-inicio {  padding: 20px 3% 40px; text-align: center;}
	#restaurante-inicio {  padding: 90px 9% 90px;  text-align: center;}
	#restaurante-inicio p, #restaurante-inicio h2 {color:#fff;}
	#restaurante-inicio .google_font {color:#fff!important;}
	#restaurante-inicio a { background-color: #ffffff!important;  color: #f1653e!important;  border-color: #ffffff!important;}
	ul#lista-servicios{grid-template-columns: repeat(3, 1fr);}

	#portada-hotel .slick-slide img {object-fit: cover; height: 255px;}
	#portada-restaurante .slick-slide img {  height:270px;}
	#servicios-hotel li { width: 46%;}
	#servicios-hotel li:nth-child(3){border-top:0px solid transparent; padding: 0px 15px 20px;}
	#contenido-hotel li{ width: 46%;}
	
	.single-post .content_wrapper { max-width: 90%; text-align: center;}
	.joinchat__button{display:none;}
	.joinchat--optout.joinchat--chatbox .joinchat__button, .joinchat--chatbox .joinchat__button{display:flex !important;}
	.joinchat__optin label:before{top:-4px;}
	.joinchat__optin label:after{top:-2px;}
	
	/* Barra inferior de botones de contacto */
	#contactobar {width: 100%; position: fixed; left: 0; bottom: 0; z-index: 999; font-size: 30px; background: linear-gradient(74deg, rgb(242 100 61) 0%, rgb(242 100 61) 100%); color: #ffffff; display: inherit;}
	#contactobar .cuerpo {margin: 8px 0 0; width: 100%; max-width: 1080px; display: flex; justify-content: center; align-items: center;}
	#contacto {text-align: center; width:100%;display: flex;  justify-content: space-evenly;align-items: flex-end;}
	#contacto a{color:#fff; display: inline-block; padding:0 2.5%;} /*En el pádding este es donde se da más espacio o menos entre iconos*/
	#contacto a:active{color:#fff;}
	#contacto a:hover{color:#fff;}
	#contacto span { font-size: 11px; display: block;}
	.footer-menu-sticky #Footer { padding-bottom: 130px;!important}
	.botones-mas-info-maquina a {  width: auto!important; font-size: 1.3em;}
	
	.panel-lateral-2 .portfolio_group { display: flex; flex-direction: row; flex-wrap: wrap; align-content: center;  justify-content: center;  align-items: center;}
	.panel-lateral-2 .portfolio_group .portfolio-item {width: 50%!important; padding: 0 2%; margin: 0!important;}
	.panel-lateral-2 h2 {  border-bottom: 1px solid #8e8e8e;  padding: 13px;}
	
	body .cky-btn-revisit-wrapper{z-index:1000;}
	body .cky-revisit-bottom-left {bottom: 71px;}

}

@media only screen and (max-width: 767px){
	#Content .section_wrapper{max-width:inherit !important; padding-left: 0 !important; padding-right: 0 !important;}
	.caja{max-width:770px; margin:0 auto;}
	.mobile-header-mini #Top_bar a.responsive-menu-toggle {right: 17px; margin-top: 0px;}
	#Header #Top_bar #logo{height: 117px!important; line-height: 117px!important; display:inline-block;}
	#Header #Top_bar #logo img.logo-mobile {max-height: 133px!important; margin-top:5px;}
	
	#banners-inicio .banners ul{flex-wrap:wrap; gap:inherit;}
	#banners-inicio .banners li a{padding:3%; width:100%;}
	#banners-inicio .banners li a span{font-size:1.65em; padding:0 5px; background-color: rgb(0 0 0 / 38%);}
	#banners-inicio .banners li:nth-child(1), #banners-inicio .banners li:nth-child(2){flex:0 0 50%;}
	#banners-inicio .banners li:nth-child(1) img, #banners-inicio .banners li:nth-child(2) img{max-height:250px; object-fit:cover; width:100%;}
	#banners-inicio .banners li:nth-child(3){flex:inherit; width:100%;}
	#banners-inicio .banners li:nth-child(3) img{width: 100%; height: 250px; object-fit: cover; object-position: top;}
	
	ul#lista-servicios{grid-template-columns: repeat(2, 1fr);}
	
}