/* diseño,montaje html y front-end UX/UI por Rafael Olea contacto@rafelolea.cl www.rafaelolea.cl */
@import url("font-awesome/css/font-awesome.min.css"); /* icons FontAwesome 4 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kaisei+HarunoUmi:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
body { font-family: 'Poppins', sans-serif; color: #666;}
h1 {font-family: 'Great Vibes', cursive;}
a {color:#09C;}
p {font-size: .9em;}
a:hover {text-decoration: none;}
.fondo-sitio {background: url(../images/fondocastillo.jpg) center top no-repeat;}
.fondo-header {position: absolute; display: block; margin:0 auto; left:0; right:0; text-align: center;}
.logo {position: absolute; top:0; z-index: 3;}
.menu-principal {font-family: 'Kaisei HarunoUmi', serif; position: absolute; top:-60px; margin-top: 0; padding-top: 180px; padding-bottom: 170px; background: url(../images/fondo-menu.png) center top no-repeat; width: 182px; z-index: 2;}
.menu-lista {margin-left: 15%; margin-right: 20%;}
.menu-lista a {color: #3e2408; font-weight: 700; border-bottom: 1px dashed #b18f5b; display: block; line-height: 30px;}
.menu-lista a:hover {color: #fff;}
.form-check {margin: .5em 0;}
.form-control {font-size: .9em; height: 40px;}
.form-group label {font-size: 1.1em;}
.form-group label span {color:#000; font-size: .8em;}
.list-group-item {padding: 8px 15px; font-size:1em;}
.list-group-item.active {background-color: #5E8E78; border-color: #5E8E78;}
ul li {font-size: .9em;}

/* Efectos animación imágenes Hover */
/* Grow */
.hvr-grow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; }
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active { -webkit-transform: scale(1.04); transform: scale(1.04); }
/* Shrink */
.hvr-shrink { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; }
.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active { -webkit-transform: scale(0.93); transform: scale(0.93); }

/* >> HEADER << */
#header {padding:0; min-height: 330px;}

/* POP-UP PORTADA */
.pop-up-portada .modal-body {padding: 0;}
.pop-up-portada button.close {padding: 10px 15px; position: absolute; right: 0; background: #fff;}
.card-header {padding: 5px;}
.card-user .card {border: none; padding: 2em; background: #ffffff; border:1px solid #e5e5e5;}
.card-user .card-header {color:#5E8E78; font-size: 1.3em; text-transform: uppercase; border-bottom:none; background:#ffffff; font-weight: 500; }

/* >> BODY << */
.bienvenidos {background: url(../images/fondo-lineas.jpg) repeat; padding: 15px; margin-top: 40px; margin-right: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.bienvenidos p {color:#505b51; font-size: .9em; margin: 0;}
.bienvenidos h1 {color:#505b51;}
.portada-categorias {background: url(../images/fondo-lineas.jpg) repeat; padding: 20px 15px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
.portada-categorias a img {-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin-right: 10px;}
.portada-categorias a {font-family: 'Kaisei HarunoUmi', serif; font-weight: 700; display: block; color:#727971; min-width: 210px; padding: 5px 20px 5px 5px; }
.portada-categorias a:hover {background: #fff; border: 1px dashed #ABB2AA; padding: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
.portada-carrusel {padding: 0;}
.portada-contacto {padding: 0; float:left;}
.portada-contacto a {font-family: 'Kaisei HarunoUmi', serif; color:#09C; font-size: 1.5em; font-weight: 700; display: block; }
.portada-contacto a:hover, .portada-contacto a span:hover {color:#505b51;}
.portada-contacto a span {font-family: 'Poppins', sans-serif; font-size: 12px; color:#7E857D; font-weight: 500;}
.portada-contacto iframe {max-width: 220px; height: 120px; margin-top: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
.titulo-interiores {font-family: 'Great Vibes', cursive; text-align: center; color: #fff; text-shadow: 2px -1px #323c33; margin-top: 35px;}
.titulo-interiores h2 {font-size: 90px;}
.servicios-contenedor {text-align: center; margin: 0 auto;}
.servicios-item {display: block;}
.servicios-item img {text-align: center; margin:0 auto; padding: 5px;}
.servicios-item h3 {font-family: 'Great Vibes', cursive; font-size: 2.4em; color:#818880; padding-top: 10px;}
.servicios-item:hover {background: #EAEDE9; }
.servicios-item h3:hover {color: #066; display: block;}
.item-informacion h3 {font-family: 'Great Vibes', cursive; font-size: 2em; border-bottom: 1px dashed #ddd; margin-bottom: .5em;}
.item-informacion a:hover {color:#000;}
.fono a {font-family: 'Kaisei HarunoUmi', serif; color:#09C; font-size: 1.5em; font-weight: 700; display: block; }
.fono a:hover {color: #666;}
.ubicacion-mapa iframe {-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; width: 100%; }
.galeria-foto {text-align: center;}


/* MODAL LATERAL IZQUIERDO */
.modal .modal-dialog-aside{ width: 350px; max-width:80%; height: 100%; margin:0; transform: translate(0); transition: transform .2s;}
.modal .modal-dialog-aside .modal-content{  height: inherit; border:0; border-radius: 0;}
.modal .modal-dialog-aside .modal-content .modal-body{ overflow-y: auto }
.modal.fixed-left .modal-dialog-aside{ margin-left:auto;  transform: translateX(100%); }
.modal.fixed-right .modal-dialog-aside{ margin-right:auto; transform: translateX(-100%); }
.modal.show .modal-dialog-aside{ transform: translateX(0);  z-index: 30000;}
.modal-open .modal {z-index: 100000;}
.informativos {border-top: 2px solid #ddd; padding-top: 2em;}
.informativo-item {display: flex; padding: 10px; background: #f3fbf7; border:2px dotted #c7e3d6; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
.informativo-item img {max-width: 55px; height: 55px; margin-right: 10px;}
.informativo-item h3 {font-weight: 600; font-size: 1em; margin: 0; color:#5E8E78;}
.informativo-item p {margin: 0; font-size: .8em; color:#5E8E78; font-weight: 400;}

/* contacto */
.r-form-contacto, .r-contacto-info {padding: 1em 0 4em 0;}
.r-form-contacto, .r-contacto-info  p {margin: 0;}
.r-form-contacto h2 {margin: 1em 0; font-size: 1.5em; color: #000000;}
.r-contacto-info h2 {margin: 1em 0; font-size: 1.5em; color: #000000;}
.r-contacto-info a {color: #99683B;}
.r-contacto-info a:hover {color: #5E8E78;}
.r-contacto-info i {color:#5E8E78;}

/* contacto */
.r-form-contacto, .r-contacto-info {padding: 10px 15px; background: #ffffff;}
.r-form-contacto, .r-contacto-info  p {margin: 0;}
.r-form-contacto h2 {margin: 1em 0; font-size: 1.5em; color:#5E8E78;}
.r-contacto-info h2 {margin: 1em 0; font-size: 1.5em; color:#5E8E78;}

/* swiper carrusel */
.swiper-container { width: 100%; height: 100%; }
.swiper-slide { /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }


/* >> FOOTER << */
.f-contenedor {display: flex; justify-content: space-between; border-top: 1px dashed #ddd; border-bottom: 1px dashed #ddd; margin-top: 2em; padding-top: 1em; padding-bottom: 1em;}
.f-contenedor p {margin: 0; font-size: .8em;}
.f-contenedor a {color: #666;}
.f-contenedor a:hover {color: #09C;}
.f-redes h2 {font-size: .8em; text-align: right; margin-right: 5px;}
.f-fb {margin-top:2px;}
.f-tw {margin-right: 7px; float: right;}
.f-form {display: flex; justify-content: space-between; align-items: flex-start;}
.visual {text-align: right; margin-bottom: 20px;}
.visual a {color:#666; font-size:.7em; margin:1em 0; }
.visual a:hover {color: #000; }

/* >>> >>> MEDIA QUERIES <<< <<< */

@media (max-width: 992px) {
    .portada-contenidos {max-width: 90%; margin:0 auto;}
    .bienvenidos {margin-right: 10px;}
    .portada-contacto-datos {display: flex; justify-content: space-between;}
    .portada-contacto iframe {max-width: 100%; margin: 0 auto; display: block; margin-top: 2em;}
    .portada-categorias {padding: 5px 15px;}
    .servicios-item h3 {font-size: 1.8em;}
    .portada-contacto iframe {height: 250px;}
    .portada-platos {display: none;}
    .titulo-interiores  {margin-bottom: 2.5em;}
}

@media (max-width: 768px) {
    .portada-contenidos {max-width: 60%; margin:0 auto;}
    .portada-contacto-datos {display: block; text-align: center; margin-top: 2em;}
    .servicios-item img {padding-bottom: 20px;}
    .servicios-item h3 {font-size: 1.6em;}
    .r-form-contacto {padding: 0;}
.f-form {flex-direction: column; align-items: center; margin: 10px 0;}

}

@media (max-width: 576px) {
    .fondo-sitio {background: url(../images/fondocastillo-mini.jpg) center top no-repeat;}
    .menu-principal {display: none;}
    .bienvenidos {margin: 0 auto; max-width: 90%;}
    .portada-contenidos {max-width: 90%; margin:0 auto;}
    .portada-contacto-datos { margin-top: 1em;}
    .logo {top:70px; left:0; right: 0; text-align: center; width: 100%;}
    .logo img {max-width: 220px;}
    #header .container {padding: 0;}
    .fondo-header {top:60px;}
    .titulo-interiores {margin-top: 100px; margin-bottom: 50px;}
    .titulo-interiores h2 {font-size: 80px;}
.visual {text-align: center; margin-top: 10px;}

}