/*
ver si mas elementos en https://bootswatch.com/flatly/

! NOTAS
CSS de modificacion de Bootstrap 3 CDB, con lectura posterior para overwrite
____
TRUCO
INI: @media screen { / ===== ZONA TIPOGRAFIA/
FIN: } / xxx End_media_dummy_block_Truco /
	-> con eso creo un bloque temporal para permitir "folding block", y facilitar la navegación en el fichero para editar. Luego eliminarlos
CLEAN CSS USAGE: export -> find reg expresion (?=unused)(.*)(?=.) REPLACE 
CLEAN DUST: export Remove & Commens, luego comparar
CLEAN AÑADIR: .collapse .collapse.in navbar-brand.fixed-top.shrink
____
COLORES

CAMPO
#a0a50f Amarillo
#0489c9 cielo
#004bb9 cielo intenso
#72798c59 transparente azul BGCOLOR3T
#7b9544 verde
#4f7400 verde osc COLOR1 Nav
	verde MUY osc COLOR7 Colofon
#1e4165  azul
#65421E  marron COLOR2

color1 #4f7400 -> nav, link, btn-primary, fa, fondo1
	#4f7400  verde osc
color6 #1e2649 -> colofon (footer-below), mas oscuro que footer-above
	#405c04 verde nuy oscuro
color2 #126389 -> seccion con fondo, (succes), letras destacada
color3t #12638999 -> fondo transparente  texto jumbotron con img
	#72798c59 azul transparente
color2bba #7b9544 -> header/fondo, success/fondo btn-success/border label  fondo2
	?? cual era?? puse 7b9544 verde, 
color3odd #00A0DD -> color2 +claro -> jumbotron/fondo , nav NAV/hover btn-outline btn-success
	#65421E   marron
color5 #003495 -> tipografia gris oscuro
theme fiiso NEW
color1 azul mano #4f7400 , nav, link, fa, btn-primary
colorx2 azul+claro #008fb3 fondo1 , success/fondo 
colorx3 azul++claro #65421e
col verde #2ca05a
color-colofon #003340 footer-below
 */
 /* HACKS*/
 .c-zoom-in {cursor: zoom-in;}  /* para el a:hover cuando hay imagen mas grande */
 
 /* RESET / NORMALIZE MINIMAL */
 html {box-sizing: border-box;/*font-size: 16px;*/}
*,*::before,*::after {box-sizing:inherit;margin:0;padding:0;}
ol,ul{list-style: none;}
img{max-width: 100%;height: auto;display: block;}
/* previende overflow desbordado */
p,li,h1,h2,h3,h4 {word-break: break-word; hyphens: auto;}
/* CENTRADO - Horiz y Vertical, centrar columna  centrada , ideal para contenedor HERO y Jumbotron */
.row-centered {text-align: center;}
.col-centered {display: inline-block;float: none;text-align: center;	margin-right: -4px;}
/* SPACERS  - uso Inline en movil */
.padd15 {display:block;padding:15px;}
.padd25 {display:block;padding:25px;}
.padd35 {display:block;padding:35px;}
.paddt100 {display:block;padding-top:100px;}
.separa_obj {display: inline-block;margin: 1vw;} /* separa dos elementos inline, como 2 botones */
.card {border: 1px solid #ddd;border-radius: 17px;margin: 1rem 0;padding:1rem;}
/* YOUTUBE RESPONSIVE  */
  /* contenedor para el iframe
  <div class="videoWrapper" style="--aspect-ratio: 3 / 4;"> <iframe ...> </div>
  si no especifico el aspect-ratio los hace por defecto en 16/9  */
.videowrapper {position: relative;height: 0;padding-bottom: calc(var(--aspect-ratio, .5625) * 100%);}
.videowrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
@media screen { /* ===== TYPOGRAFIA RELATIVA */
/* calculo visual tipo RATIO Y SCALE online https://type-scale.com/ */
body {overflow-x: hidden; }
body, p , .p{
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
	line-height:1.42857143;
	color:#333;
}
h1,h2,h3{margin-top:21px;margin-bottom:10.5px;line-height:1.1;color:inherit;}
h4,h5,h6{margin-top:10.5px;margin-bottom:10.5px;line-height:1.1;color:inherit;}
p{margin:0 0 10.5px}
.lead{margin-bottom:21px;font-weight:300;line-height:1.4}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 {
    /* text-transform: uppercase; */
    font-family: 'Lobster', cursive;
    font-weight: 700;
}
/* Heading + p-sizes */
html, body {font-size: 1em;}
h1, .h1 {font-size: 2.5rem; /* px */}
h2, .h2 {font-size: 2.2rem; /* px */}
h3, .h3 {font-size: 1.8rem; /* px */}
h4, .h4 {font-size: 1.4rem; /* px */}
h5, .h5 {font-size: 1.25rem; /* px */}
h6, .h6 {font-size: 1rem; /* px */}


ul,ol{margin-top:0;margin-bottom:10.5px;}
.list-inline{padding-left:0;list-style:none;margin-left:-5px}
.list-inline > li{display:inline-block;padding-left:5px;padding-right:5px}
/* dl{margin-top:0;margin-bottom:21px} */
/* dt,dd{line-height:1.42857143} */
/* dt{font-weight:700} */
/* dd{margin-left:0} */
blockquote{
	padding:10.5px 21px;
	margin:0 0 21px;
	font-size:1.25rem;
    border-left: 5px solid #166477; 
	clear: both;
}
figcaption {
	text-align: center;
	background-color: #ddd;
	line-height: 16px;
	font-size: 14px;
}
/* modif DOMIÑA para textos p.h3 pagina historia domiña */
.h3 {
	display: block;
	margin-bottom: 35px;
	margin-top: 35px;
	margin-left:20px;
}

#subtit {
	/* display: block; */
	border-radius: 1rem;
	background-color: #eeeeee57;
	max-width: 400px;
	padding: 1rem;
	/* font-size: 2rem; */
	}
#subtit.pedidos{
	background-color: #d6cbb9a1;
	padding: 1rem;
	}

strong {font-weight: 700; text-shadow: 1px 0 0 currentColor;color: #A0522D;}
.grueso {text-shadow: 2px 0 0 currentColor;font-weight: 700;}
p a {text-decoration: underline; }
.jumbotron p {font-size:1.15rem;}

p { font-size: 1.125rem;}/* 18px */
p.med, .med { font-size: 1rem; }
p.small, .small , small{ font-size: 0.75rem; }
p.lead , .lead {
    font-size: 1.25rem;
    margin: 1.6rem 0;
    line-height: 1.5;
}
p.lead.inverso {
    font-family: lobster;
    color: #fff;
    /* font-weight: 700; */
    font-size: 2rem;
    font-weight: 400;
}
.izq {text-align: right;}
} /* xxx End_media_dummy_block */

@media screen { /* === COLORES en juego */
body {background-color: #ffffff;}

.inverse p {
	color: #ffffff;
	/* aplica en secciones, footer, etc, color transparente pa q no salga blanco sino bgcolor del div contenedor */
	background-color: transparent;
}
/* en letrass */
.color1 {color: #4f7400;}
.color2 {color: #008fb3;}
.color3 {color: #A0522D;} 
/* en fondo - útil para H2, H3, H4  */
.bgcolor1 {background-color: #4f7400; color: #ffffff;}
.bgcolor2 {background-color: #008fb3; color: #ffffff;}
.bgcolor3 {background-color: #65421e; color: #ffffff;}
/* 			fondo transparente para jumbtron/hero */
.bgcolor1t {background-color: rgba(0, 102, 128, 0.50); color: #ffffff;}
.bgcolor2t {background-color: rgba(0, 143, 179, 0.50); color: #ffffff;}
.bgcolor3t {background-color: #72798c59;color: #ffffff;}

/* == Parrafo a Header: formato HEADING a un P, color +tamaño +padding . Parrafo destacado */
.fondo1 { 
	display:block;
	background-color: #4f7400; /* colorx1 */
	color: #ffffff;
	padding: 1rem;
	border-radius: 7px;
	font-size: 1.7rem !important;
	text-align: center;
}
p.fondo2 { 
	display:block;
	background-color: #008fb3; /* colorX2 */
	color: #ffffff;
	padding: 1rem;
	border-radius: 7px;
	font-size: 1.7rem !important;
	text-align: center;
}
p.fondo3 { 
	display:block;
	background-color: #65421e; /* colorX3 */
	color: #ffffff;
	padding: 1rem;
	border-radius: 7px;
	font-size: 1.7rem !important;
	text-align: center;
}
/* === lista destacada con FA icons */
ul.lista_destacada {
	list-style: none;
	text-align: left;
	padding-left: 10px;
	/* text-transform: uppercase; */
}
ul.lista_destacada li {
    line-height: 3;
}
ul.lista_destacada li i {
    margin-right: 0.5rem;
	color: #7b9544; /* color2 */
}

/* === Imágenes */
.img-left {float:left; margin: 1rem 0;}
.img-right {float:right; margin: 1rem 0;}
.img-center {margin: 0 auto;}
img.img-con-margen {
    margin-bottom: 20px;
    margin-top: 20px;
}

} /* xxx End_media_dummy_block */

@media screen { /* ===== HREF */
a, a:hover, a:focus, a:active, a.active {
    outline: 0;
    color: #4f7400; /* color1 */
	text-decoration: none;
}
a:hover {text-shadow: 1px 0 0 currentColor;}
a:hover,a:focus{
	/* color:#18bc9c; */
	/* text-decoration:underline */
	}
a.inverse, .inverse a {
	color: #fff;
	text-decoration: underline;
	/* font-weight: 600; */
}
a.inverse:hover, .inverse a:hover, a.inverse:focus, .inverse a:focus, a.inverse:active, .inverse a:active {
	color: #fff;
    /* color: #4f7400;  color1  */
}
/* href en bloque, para combinar fon font awesome en table-cell  */
a.tabla {
	display: block;
	text-decoration: underline dotted .125em #fff;
	text-underline-offset: 6px;
}
a.btn{
	text-decoration: none;
}
a.dev{
	text-decoration: none;
	font-weight: 500;
}
li a {
    font-size: 1.1rem;
}

 } /* xxx End_media_dummy_block */
 
@media screen { /* ===== FONT AWESOM EFECTOS */
/* === H2 TITLE LINE - Linea decorativa bajo el H2 cabeza de section */
.deco_title {
	margin: 0 0 1rem 0;
	position: relative;
	top: -10px;
}
.deco_title span.line {
	display: inline-block;
	width: 105px;
	border-bottom: 5px solid;
	background-color: #4f7400; /* color1 */
	/* color: #4f7400; color1 */ 
}
/* ico en linde deco */
 .deco_title i.fa {
	display: inline-block;
	padding: 0.3rem;
	/* color: #4f7400; color1 */
	position: relative; 
	top: 8px;
}
/* === FONT AWESOME efectos en enlaces - FAfx a href  */
/* cambia elemento blanco (inverse) con Hover */
.inverse a:hover i.fa {
	color: #4f7400; /* color1 */
}
/* cambia color del cuadrado de un stack compuesto de FA (en inverse) */
.inverse a i.fa-square {
	color: #4f7400 !important;
	transition: all .4s ease-in-out;
}
/* cambia el cuadrado de un stack compuesto de FA (en inverse) con Hover */
.inverse a:hover i.fa-square {
	color: #ffffff !important;
}
/* === Alineación TABLA, para que 2da linea de texto no "coma" la zona del icono
	table-cell para indentar texto en parrafos con fontawesome */
a.table, .table {
	display: table;
	width: 100%;
	margin-bottom: 10px;
	text-decoration: none;
}
.table-cell {
	display: table-cell !important;
	vertical-align: top !important;
}
.table-cell:nth-child(2) {
	padding-left: 1rem !important;
	vertical-align: middle !important;
}

} /* xxx End_media_dummy_block */

@media screen { /* ===== NAVBAR */

.navbar {
    /* text-transform: uppercase; */
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
}

.navbar-default {
    background-color: #4f7400; /* color1 */
}

/* nav heading H2 por algoritmo */
a.navbar-brand > h2 {
    margin: 0;
	padding-top: 0px;
	font-weight: 400;
}

.navbar-brand > h2{ /* heading para html5 outline */
	/* Efecto reduccion retardado  */
    font-size: 1.7rem;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s;
}

.navbar a:focus {
    outline: 0;
}
.navbar .navbar-nav {
    letter-spacing: 1px;
}
.navbar .navbar-nav li a:focus {
    outline: 0;
}
.navbar-default,
.navbar-inverse {
    border: 0;
}
/* COLORES NAV - fondo, title, botones */
.navbar-default {
	background-color: #4f7400; /* color1 */
	}
.navbar-default .navbar-brand {
    color: #FFF;
}
/* HOVER del NAV y LOGO BRANDING*/
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
    color: #65421e; /* color3odd */
    background-color: transparent;
}
.navbar-default .navbar-nav > li > a {
	color: #fff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #65421e; /* color3odd */
    background-color: transparent;
}
/* color fondo en NAV activo */
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: #65421e; /* color3odd */
}
/* color boton NAV en formato movil colapse */
.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;
}
.navbar-default .navbar-toggle:hover .icon-bar {
    background-color: #4f7400; /* color1 */
}
} /* xxx End_media_dummy_block */

@media screen { /* ===== HEADER */
header {
    text-align: center;
    /* color: #003495;  color5 */
    /* background: #008fb3; color2baa */
}

header .container {
    padding-top: 65px;	/* 65px; cuando el header tiene jumbotron */
    padding-bottom: 50px;
	height: 90vh;
}
/* header .jumbotron .container { */
    /* padding-top: 10px; SI hay jumbotron en header */ 
/* } */
main .container.noheader {
    padding-top: 65px; 	/* cuando no hay header */
    }

header .jumbotron {
	color: #333; /* color3odd */
	background-color: #ffffff;
	/* recorto por debajo para efecto en boton que transpasa hacia abajo */
	padding-bottom: 0;
	/* si quiero imagen wide de fondo */
	background-image: url("img/bosque-urbano-velez-v400.jpg");
	background-position: center bottom;
	background-size: cover;
	background-repeat: no-repeat;
	/* efecto de desplazamiento en img fondo */
	background-attachment: fixed;
	/* limito altura al alto total de pantalla */
	max-height: 100vh;
}

/* contenedor data */
.header-caption {
    background: rgba(255, 255, 255, 0.38);
    width: 100%;
    margin: auto;
    margin-top: 50px!important;
    max-width: 700px;
	/* min-height: 67vh; */
    padding: 1%;
	border-radius: 7px;
}
/* LOGO fondo trans y redondo */
.img-responsive.logo {
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.35);
}
/* Header Styles Typo */
/* HEADER H1-TITLE - por algoritmo html5 , cuando contiene el H1-TITLE de pagina */
header h1.title { margin: 0.5rem 0 1rem 0; font-size: 2.3rem; } 
header h1.title { margin: 0.5rem 0 1rem 0; font-size: 2.3rem; } 
header h1.title { margin: 0.5rem 0 1rem 0; font-size: 2.3rem; } 
header h1.title .slogan {display:block;margin: 0; color: #4f7400; font-size: 1.4rem; font-weight: 400;text-transform: initial;}
header h1 span.title {display: block;font-size: 2rem;}
header h1 span.title2 {display: block;font-size: 1.5rem;font-weight: 500;}
header h1 span.title3 {display: block;font-size: 1rem;font-weight: 900;color: #A0522D;text-shadow: 1px 0 0 currentColor;letter-spacing: 0.15em;
/*text-transform: full-width;*/padding-top: 10px;line-height: 0.5;margin-bottom: 30px;font-family:Montserrat;}
header .slogan {display: block;margin-top: 20px;max-width: 380px;font-size: 24px;font-weight: 700;color: #126389;padding: 10px;text-align: left;} /* color2 */

.jumbotron p.mediano {font-size:1.16rem;} /* 17px* aumentar en @screen 900*/
/* parrafo header, limito el ancho en mv */
header .jumbotron p.lead {
	/* margin: 0; */
	/* padding: 0; */
	display: block;
	max-width: 500px;
	/* text-align: center; */
	margin: auto;
}
.header-caption  p.lead {
	/* margin: 0; */
	/* padding: 0; */
}
/* BOTON jumbotron sobresale hacia abajo */
header .jumbotron .btn {
	/* position: relative; */
	/* top: -50px; */
	/* border-radius: 50%; */
}

header img {
    display: block;
    margin: 0 auto 20px;
}


} /* xxx End_media_dummy_block */

@media screen { /* ===== BOTONES */
.btn:focus,
.btn:active,
.btn.active {
    outline: 0;
}

.btn-lg {
	margin-top: 20px;
	font-size: 1.25rem;
	padding: 0.7rem 1rem;
	line-height: 1.3333333;
	border-radius: 5px;
}
.btn-m {
	font-size: 1rem;
}
.btn-primary {
	color: #ffffff;
	background-color: #4f7400; /* color1 */
	/* margin-top: 15px; */
    border: 2px solid #4f7400 !important;
	transition: all .3s ease-in-out;
}
.btn-primary i.fa{
	color: #ffffff !important;
	background-color: #4f7400 ;
	transition: all .3s ease-in-out;
}
.btn-primary:hover i.fa, .btn-primary:focus  i.fa, .btn-primary:active i.fa, 
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, 
.btn-primary.active, 
.open > .dropdown-toggle.btn-primary {
    color: #4f7400 !important;
    background-color: #fff !important;
    border-color: 2px solid #4f7400 !important;
}
.btn-outline {
    color: #FFF;
    background-color: #65421e; /* color3odd */
    border-color: 1px solid #65421e !important;
    transition: all .3s ease-in-out;
}

.btn-outline:hover, .btn-outline:focus, .btn-outline:active, .btn-outline.active {
    color: #65421e; /* color3odd */
    background: #fff;
    border: 2px solid #65421e; /* color3odd */
}

.btn-success {
    color: #FFF; 
    background-color: #65421e; /* color3odd */
    border-color: #008fb3; /* colorX2 */
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, 
.open > .dropdown-toggle.btn-success{
    color: #65421e; /* color3odd */
    background-color: #ffffff;
    border-color: #008fb3;/* colorX2 */
}
.btn-default {
	color: #4f7400;/* color1 */
	background-color: #fff;
	border-color: #4f7400;/* color1 */
}
.btn-default:hover ,.btn-default:focus,.btn-default:active {
	color: #4f7400;/* color1 */
	border-color: #008fb3;/* colorX2 */
}
/* Boton "ir Abajo" por más info -para FONT awesome dentro de A href class  */
.btn-scroll-down {
	display: block;
	color: #4f7400; /* color1 */
	margin-top: 15px;
    transition: all .3s ease-in-out;
}

.btn-scroll-down:hover, .btn-scroll-down:focus, .btn-scroll-down:active, .btn-scroll-down.active{
    color: #65421e; /* color3 */
}

/* contenedor de Boton "ir ARRIBA" a pie de pantalla, div contenedor posicion fijo abajo derecha  */
.scroll-top {
    z-index: 1049;
    position: fixed;
    right: 0%;
    bottom: 1%;
    width: 50px;
    height: 50px;
}

/* Boton "ir ARRIBA" -para FONT awesome dentro de A href class  */
.scroll-top .btn {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    font-size: 20px;
    line-height: 28px;
	transition: all .3s ease-in-out;
}

.scroll-top .btn:focus {
    outline: 0;
}

.btn-social {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 2px solid #fff;
    border-radius: 100%;
    text-align: center;
    font-size: 20px;
    line-height: 45px;
}

/* boton en ventana modal - CERRAR -  */
.seccion-modal .btn {background: #999;}
} /* xxx End_media_dummy_block */

@media screen { /* ===== SECTION */
section {
	padding: 75px 0; /* Hack para scroll a section: 75px = fixed navbar 60px + 15px  */
	margin-top: -50px; /* elimina el espaciado vertical de una sección cuando está debajo de otra */
	/* min-height: 600px; */
}
section.first {
    padding-top: 75px;
    }

section h2 {
    margin-bottom: 0;
}

section.inverse h2 {color: white;}

section.success {
    color: #fff;
    background: #126389; /* color2 none repeat scroll 0% 0%; */
	/* border-top: 5px solid #663399; */
}
section.success .jumbotron {
	background-color: #65421e; /* color3odd */
	}
section.success h3 {margin-top:30px;}

/* color HEADINGS P y demass no especificados en secciones INVERSE */
section.inverse {
	color: #ffffff;
}

/* Jumbotron simplificado necesita estilo  */
section.jumbotron  div.container  h3 {
	padding: 35px;
	text-align: center;
	border-radius: 6px;
}
/* textos dentro del separador con imagen */
h3.hero {
	line-height: 1.2;
	max-width: 700px;
	margin: auto auto 30px auto;
}
/* especial para separador con typo dificil */
h3.hero {
	text-transform: none;
	font-size: 2.4rem;
	font-weight: 400;
}
#separador1 {
	position: relative;
	/* color: #333; */
	/* background-color: #ffffff; */
	/* recorto por debajo para efecto en boton que transpasa hacia abajo */
	/* padding-bottom: 0; */
	/* Si quiero imagen wide de fondo */
	/* background-image: url("img/xxx.jpg"); va inline */
	background-size: cover;
	/* background-position: horizX% vertY% posiciona la IMG cuando background-size NO es cover, tambien puedo combinar px y % */
	background-position: 4% 54%;
	background-repeat: no-repeat;
	/* background-attachment SCROLL (default), FIXED da efecto parallax */
	background-attachment: fixed;
	height:100vh;
	/* min-height: 300px; */
}
#separador2 {
	position: relative;
	/* background-image: url("img/xxx.jpg"); va inline */
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	height:100vh;
	/* min-height: 300px; */
}
/* Posicion centrada del div.container */
#separador1 > div, #separador2 > div {
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 90%;
    max-width: 980px;
	padding: 35px;
	text-align: center;
	border-radius: 6px;
}
} /* xxx End_media_dummy_block */

@media screen { /* =====  FOOTER */
footer, footer p, footer ul li, footer h2, footer h3, footer p a, footer a {
    color: #fff;
}

footer h3 {
    margin-bottom: 30px;
}

footer .footer-col {
    margin-bottom: 50px;
}

footer .footer-above {
    padding-top: 50px;
    background-color: #4f7400; /* color1 */
    /* background-color: #2c3e50; */
}
footer .footer-below {
    padding: 25px 0;
    background-color: #405c04; /* color6 */ /* colorcolofon oscuro colofon */
}
footer .footer-below a {
	font-size: 1rem;
}
} /* xxx End_media_dummy_block */

@media screen { /* ===== BAGUETTEBOX.js GALLERY 1.11.0  https://github.com/feimosi/baguetteBox.js  */
 #baguetteBox-overlay{display:none;opacity:0;position:fixed;overflow:hidden;top:0;left:0;width:100%;height:100%;z-index:1000000;background-color:#222;background-color:rgba(0,0,0,.8);-webkit-transition:opacity .5s ease;transition:opacity .5s ease}#baguetteBox-overlay.visible{opacity:1}#baguetteBox-overlay .full-image{display:inline-block;position:relative;width:100%;height:100%;text-align:center}#baguetteBox-overlay .full-image figure{display:inline;margin:0;height:100%}#baguetteBox-overlay .full-image img{display:inline-block;width:auto;height:auto;max-height:100%;max-width:100%;vertical-align:middle;-webkit-box-shadow:0 0 8px rgba(0,0,0,.6);-moz-box-shadow:0 0 8px rgba(0,0,0,.6);box-shadow:0 0 8px rgba(0,0,0,.6)}#baguetteBox-overlay .full-image:before{content:"";display:inline-block;height:50%;width:1px;margin-right:-1px}#baguetteBox-slider{position:absolute;left:0;top:0;height:100%;width:100%;white-space:nowrap;-webkit-transition:left .4s ease,-webkit-transform .4s ease;transition:left .4s ease,-webkit-transform .4s ease;transition:left .4s ease,transform .4s ease;transition:left .4s ease,transform .4s ease,-webkit-transform .4s ease,-moz-transform .4s ease}#baguetteBox-slider.bounce-from-right{-webkit-animation:bounceFromRight .4s ease-out;animation:bounceFromRight .4s ease-out}#baguetteBox-slider.bounce-from-left{-webkit-animation:bounceFromLeft .4s ease-out;animation:bounceFromLeft .4s ease-out}@-webkit-keyframes bounceFromRight{0%,100%{margin-left:0}50%{margin-left:-30px}}@keyframes bounceFromRight{0%,100%{margin-left:0}50%{margin-left:-30px}}@-webkit-keyframes bounceFromLeft{0%,100%{margin-left:0}50%{margin-left:30px}}@keyframes bounceFromLeft{0%,100%{margin-left:0}50%{margin-left:30px}}.baguetteBox-button#next-button,.baguetteBox-button#previous-button{top:50%;top:calc(50% - 30px);width:44px;height:60px}.baguetteBox-button{position:absolute;cursor:pointer;outline:0;padding:0;margin:0;border:0;-moz-border-radius:15%;border-radius:15%;background-color:#323232;background-color:rgba(50,50,50,.5);color:#ddd;font:1.6em sans-serif;-webkit-transition:background-color .4s ease;transition:background-color .4s ease}.baguetteBox-button:focus,.baguetteBox-button:hover{background-color:rgba(50,50,50,.9)}.baguetteBox-button#next-button{right:2%}.baguetteBox-button#previous-button{left:2%}.baguetteBox-button#close-button{top:20px;right:2%;right:calc(2% + 6px);width:30px;height:30px}.baguetteBox-button svg{position:absolute;left:0;top:0}.baguetteBox-spinner{width:40px;height:40px;display:inline-block;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-20px}.baguetteBox-double-bounce1,.baguetteBox-double-bounce2{width:100%;height:100%;-moz-border-radius:50%;border-radius:50%;background-color:#fff;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:bounce 2s infinite ease-in-out;animation:bounce 2s infinite ease-in-out}.baguetteBox-double-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounce{0%,100%{-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}}
 	#baguetteBox-overlay .full-image figcaption {
		 display:block;
		 position:absolute;
		 bottom:29vh;
		 width:100%;
		 text-align:center;
		 line-height:2.8;
		 white-space:normal;
		 color:#ffffff;
		 background-color:#000;
		 background-color:rgba(0, 0, 0, 0.36);
		 font-family:sans-serif;
		 letter-spacing: 1.2px;
		}
} /* xxx End_media_dummy_block */

@media screen { /* ===== FOTOS, SERVICIOS, PORTFOLIO */
#fotos .servicios-item ,
#servicios .servicios-item {
    margin: 1% 0 0 0;
	padding: 1%;
}

#fotos .servicios-item .servicios-link,
#servicios .servicios-item .servicios-link {
    display: block;
    position: relative;
    margin: 0 auto;
    max-width: 400px;
}

#fotos .servicios-item .servicios-link .caption {
	    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0; /* opacity: 0; XXX visible en hover */
    background: #905bc5;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    transition: all ease .5s;
}
#servicios .servicios-item .servicios-link .caption {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 1; /* opacity: 0; XXX visible en hover */
    /* background: #65421e; */ /* colorX3 */
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    transition: all ease .5s;
}
/* aumento espaciado caption del boton fontawesome*/
.caption-content > p {
    margin-bottom: 10%;
    display: block;
	color: #ffffff;
	background-color: rgba(0, 102, 128, 0.50); /* bgcolor1t */
	padding: 1rem;
}

#fotos .servicios-item .servicios-link .caption:hover,
#servicios .servicios-item .servicios-link .caption:hover {
    opacity: 1;
}

#fotos .servicios-item .servicios-link .caption .caption-content ,
#servicios .servicios-item .servicios-link .caption .caption-content {
    position: absolute;
    top: 5%;
    width: 100%;
    height: 20px;
    margin-top: -12px;
    text-align: center;
    font-size: 20px;
    color: #fff;
}

#fotos .servicios-item .servicios-link .caption .caption-content i,
#servicios .servicios-item .servicios-link .caption .caption-content i {
    margin-top: -12px;
}

#fotos .servicios-item .servicios-link .caption .caption-content h3,
#fotos .servicios-item .servicios-link .caption .caption-content h4,
#servicios .servicios-item .servicios-link .caption .caption-content h3,
#servicios .servicios-item .servicios-link .caption .caption-content h4 {
    margin: 0;
}

#fotos *,
#servicios * {
    z-index: 2;
}

/* ======       Servicios MODAL DATA */
#servicios-data, #instalaciones-data, .seccion-modal{
	padding: 0;
}
.servicios-modal .modal-content {
    padding: 10px 0;
    min-height: 100%;
    border: 0;
    border-radius: 0;
    text-align: center;
    background-clip: border-box;
    -webkit-box-shadow: none;
    box-shadow: none;
}
º
.servicios-modal .modal-content h2 {
    margin: 0;
    font-size: 3em;
    text-align: center;
}
.servicios-modal .modal-content p ,
.servicios-modal .modal-content blockquote{
	text-align: left;
}

.servicios-modal .modal-content img {
    margin-bottom: 30px;
    margin-right: 20px;
 /*   margin-left: 20px; */
	border: 2px solid #4f7400; /* color1 */
	min-height: 200px;
	background: #65421e; /* colorX3 */
}

.servicios-modal .modal-content .item-details {
    margin: 30px 0;
}

.servicios-modal .close-modal {
    position: absolute;
    top: 0px; /*25px;*/
    right: 40px;
    width: 250px; /*75px;*/
    height: 200px;
    background-color: transparent;
    cursor: pointer;
	text-align: right;
}

.servicios-modal .close-modal:hover {
    opacity: .3;
}

.servicios-modal .close-modal .lr {
    z-index: 1051;
    width: 1px;
    height: 75px;
    margin-left: 35px;
    background-color: #2c3e50; /* color */
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.servicios-modal .close-modal .lr .rl {
    z-index: 1052;
    width: 1px;
    height: 75px;
    background-color: #2c3e50; /* color */
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
/* ancho completo en DIV.fotos*/
.foto { /* ancho completo en DIV.fotos*/
    padding: 0 ;
	}
/* bloque para CLEAR el contenido del modal */
.limpia {
    width: 100%;
    background-color: rgba(22, 100, 119, 0.59);
    margin-top: 25px;
    clear: both;
}


} /* xxx End_media_dummy_block */

@media screen { /* ===== FORM  */
.row.control-group{margin: 0 5px;}
label.form-check-label {display: inline;}
.modal-dialog {width:85%;margin: 30px auto;max-width: 900px;}
p.help-block ul {margin-left: -15px;}
p.help-block ul li {margin-left: 1rem;font-size: 1rem;font-weight: bold;color: red;list-style: none;}
input[type="checkbox"] {margin-right: 10px;}
input[type="checkbox"]:required:invalid {outline: solid 4px red;}
input[type="checkbox"]:required:valid  {outline: solid 4px green;}
input[type="checkbox"]:required:invalid + label { color: red; }
input[type="checkbox"]:required:valid + label { color: green; }
input[type="checkbox"]:not(:checked) {outline: 4px solid #FF0000;}
input[type="checkbox"]:checked {outline: 4px solid green;}

.form-text a {
	font-size: 0.75rem;
}
.floating-label-form-group {
    position: relative;
    margin-bottom: 0;
    padding-bottom: .5em;
    border-bottom: 1px solid #eee;
}

.floating-label-form-group input,
.floating-label-form-group textarea {
    z-index: 1;
    position: relative;
    padding-right: 0;
    padding-left: 0;
    border: 0;
    border-radius: 0;
    font-size: 1.2rem;
    background: 0 0;
    box-shadow: none!important;
    resize: none;
}

.floating-label-form-group label {
    display: block;
    z-index: 0;
    position: relative;
    top: 2em;
    margin: 0;
    font-size: 1rem;
    line-height: 1.764705882em;
    vertical-align: middle;
    vertical-align: baseline;
    opacity: 0;
    -webkit-transition: top .3s ease,opacity .3s ease;
    -moz-transition: top .3s ease,opacity .3s ease;
    -ms-transition: top .3s ease,opacity .3s ease;
    transition: top .3s ease,opacity .3s ease;
}

.floating-label-form-group:not(:first-child) {
    padding-left: 14px;
    border-left: 1px solid #eee;
}
.floating-label-form-group-with-value label {
    top: 0;
    opacity: 1;
}

.floating-label-form-group-with-focus label {
    color: #008fb3; /* colorX2 */
}

form .row:first-child .floating-label-form-group {
    border-top: 1px solid #eee;
}

.checkbox label, .radio label {
	font-size: 1.2rem;
	line-height: 2.2;
	color: #888;
}
.checkbox p.lead,
.radio p.lead{
	margin-bottom: 10px;
	color: #888;
	font-size: 1.2rem;
	text-indent: 15px;
}

.radio input[type="radio"] {
	position: relative;
	margin: 10px;
}

} /* xxx End_media_dummy_block */

@media screen { /* ===== DETAILS -> SUMMARY (FAQ)  */
/*   */
details {
  width: 90%;max-width: 750px;
  margin: 0 auto ;
  background: #eee;
  margin-bottom: .5rem;
  box-shadow: 0 .1rem 1rem -.5rem rgba(0,0,0,.4);
  border-radius: 5px;
  overflow: hidden;
}

summary {
  display: block;
  padding: 1rem;
  background: #4f7400;
  padding-left: 2.2rem;
  font-weight: 900;
  font-size: 1.15em;
  position: relative;
  cursor: pointer;
}

summary:before {
  content: '';
  border-width: .4rem;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 1.3rem;
  left: 1rem;
  transform: rotate(0);
  transform-origin: .2rem 50%;
  transition: .25s transform ease;
}

/* fx */
details[open] > summary:before {
  transform: rotate(90deg);
}
details summary::-webkit-details-marker {
  display:none;
}
details p {
	color: #333 !important;
	padding: 1rem;
}
details > ul {
  padding-bottom: 1rem;
  margin-bottom: 0;
}
/**/
} /* xxx End_media_dummy_block */
@media screen { /* =====  VS */

} /* xxx End_media_dummy_block */

@media screen { /* ===== MODS custom  */
/*   */

/**/
} /* xxx End_media_dummy_block */

@media screen and (orientation:landscape)  { /*  ===== MEDIA pantallas LANDSCAPE (mas anchas que altas) */
	/* BAGUETTE caption abajo de todo en pantallas anchaS */
	#baguetteBox-overlay .full-image figcaption {
		 bottom:0vh;
		}
	.no-desk {display:none;}
}

@media(min-width:767px) { /*  ===== MEDIA > 768px  servicios y fotos ?? */
	.foto { /* ancho completo en DIV.fotos*/
	padding: 0 1rem 1rem 0;
	}
    #servicios .servicios-item {
        margin: 0 0 30px;
    }
    #fotos .servicios-item {
	margin: 2% 0 0 0;
	padding: 2%;
    }
} 
@media(min-width:768px) { /*  ===== MEDIA > 768px */
	/* TIPOGRAFIA Mayor en pantallas grandes */
	.sm-hidden {display:none;}
	p {font-size: 1.15rem;}
	p.lead, lead  {font-size: 1.3rem;}
	p.small, .small {font-size: 1rem;}
	li {font-size: 1.15rem;}
	/* texto 1ra seccion cuando no es H1 */
    header .intro-text .name {font-size: 4.75em;}
    header .intro-text .skills {font-size: 1.75em;}
	/* texto 1ra seccion cuando no es TITULO de pagina (outline html5 ) */
	header h1.title { font-size: 3rem; } 
	header h1.title span.slogan {font-size: 2rem;padding: 0.5rem 4rem;}
	header h1 span.title {font-size: 3.5rem;}
	header h1 span.title2 {font-size: 2.6rem;}
	header h1 span.title3 {font-size: 2rem;}
	header .slogan {font-size: 28px;margin: auto;max-width: 630px;}
	header .container {
		padding-top: 80px;
        padding-bottom: 60px;
    }
	main .container.noheader {padding-top: 95px; 	/* cuando no hay header */}
	/* imagen de fondo XL -mayor a 767px que es lectura rápida y acomodada en mv */
	header .jumbotron {
	background-image: url("img/bosque-urbano-velez-sat1-1200.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	}
	/* XXX DOMIÑA CUSTOM FOTO HISTORIA */
/* header .jumbotron.page2 { */
	/* background-image: url("img/fondo1-maite_sanchez-por_javier_fergo-1400.jpg"); */
	/* background-position: center; */
	/* background-repeat: no-repeat; */
	/* background-size: cover; */
	/* background-attachment: fixed; */
/* } */
	/* posicion del translucido según la foto usada */
	.header-caption {margin-top: 0px!important;}
	/* limito el ancho del parrafo header en pantallas L y XL */
	header .jumbotron p.lead {
	max-width: 85%;
	}
	header .jumbotron .btn {
	/* position: relative; */
	/* top: -100px;  */
	}
	.jumbotron p.mediano {font-size:1.4rem;}
	/* ESCONDE NAV ITEM #5 (Instalaciones) cuando el ancho NO es suficiente */
	.navbar-nav > li:nth-of-type(5) { display: none;}
	/* NAVBAR FIJO */
	.navbar-fixed-top {
        padding: 25px 0;
        -webkit-transition: padding .3s;
        -moz-transition: padding .3s;
        transition: padding .3s;
    }
	.navbar-brand > h2,
    .navbar-fixed-top .navbar-brand  {
	    font-size: 1.5rem;
    }
    .navbar-fixed-top.navbar-shrink {
        padding: 10px 0;
    }
    .navbar-fixed-top.navbar-shrink .navbar-brand {
        font-size: 1.5em;
    }
}

@media(min-width:992px) {/*  ===== MEDIA > 992px */
	/* Heading + p-sizes */
	html, body {font-size: 1em;}
	h1, .h1 {font-size: 3rem; /* px */}
	h2, .h2 {font-size: 2.2rem; /* px */}
	h3, .h3 {font-size: 1.8rem; /* px */}
	h4, .h4 {font-size: 1.4rem; /* px */}
	h5, .h5 {font-size: 1.25rem; /* px */}
	h6, .h6 {font-size: 1rem; /* px */}
	/* MUESTRA NAV ITEM (Instalaciones) cuando el ancho es suficiente */
    .navbar-nav > li:nth-of-type(5) { display: block;}
	.navbar-brand > h2 {font-size: 1.7rem;}
	header h1 span.title {font-size: 3.5rem;}
	header h1 span.title2 {font-size: 2.6rem;}
	header h1 span.title3 {font-size: 1.5rem; font-weight: 900;}
	header .slogan {font-size: 32px;/* margin-top: 60px;margin-bottom: 40px;*/}
	.container.slim {font-size:1.2rem;max-width: 900px;}
}

@media(min-width:1200px) {/*  ===== MEDIA > 1200px */
	/* XXX DOMIÑA CUSTOM QUOTES p class H3 */
	.h3 {margin-left:90px;max-width:90%;}
	header .slogan {font-size: 37px;/* margin-top: 60px;margin-bottom: 40px;*/}
}

/* Gallery margen abajo en mosaico */
.gallery .img-responsive {
	margin-bottom: 1rem;
}
/* Instalaciones > Gallery > col-contenedora-de-IMG. Hack en gallery: pa 1ra imagen no la leo en thumb sino en 750, pues sale como destacada en resolución menor a 768px. El problema es que en pantallas mayores se estropea el mosaico de la gallery, así que lo fuerzo a tener un maximo (en pantallas grandes) igual a los thumbs */
@media(min-width:768px) {
	.gallerybox1 .img-destacada {
    /* max-width: 390px; */
    /* padding-right: 2.2%; */
	}
}

/* ANIMACIONES*/
@media screen { /* =====  ANIMACIONES / FX */
  .bounceInDown {
  -webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
  -webkit-animation-duration: 3s;
animation-duration: 3s;
  -webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-timing-function: ease-in;
animation-delay: 0s;
/* animation-iteration-count: infinite;  n veces */ 
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
}
  @-webkit-keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -3000px, 0);
  transform: translate3d(0, -3000px, 0);
  }
  
  60% {
  opacity: 1;
  -webkit-transform: translate3d(0, 25px, 0);
  transform: translate3d(0, 25px, 0);
  }
  
  75% {
  -webkit-transform: translate3d(0, -10px, 0);
  transform: translate3d(0, -10px, 0);
  }
  
  90% {
  -webkit-transform: translate3d(0, 5px, 0);
  transform: translate3d(0, 5px, 0);
  }
  
  100% {
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -3000px, 0);
  transform: translate3d(0, -3000px, 0);
  }
  
  60% {
  opacity: 1;
  -webkit-transform: translate3d(0, 25px, 0);
  transform: translate3d(0, 25px, 0);
  }
  
  75% {
  -webkit-transform: translate3d(0, -10px, 0);
  transform: translate3d(0, -10px, 0);
  }
  
  90% {
  -webkit-transform: translate3d(0, 5px, 0);
  transform: translate3d(0, 5px, 0);
  }
  
  100% {
  -webkit-transform: none;
  transform: none;
  }
  }

 
 .bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-delay: 3s;
  animation-fill-mode: both;
  }
  @-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
  transform: scale3d(.3, .3, .3);
  }
  20% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
  -webkit-transform: scale3d(.9, .9, .9);
  transform: scale3d(.9, .9, .9);
  }
  60% {
  opacity: 1;
  -webkit-transform: scale3d(1.03, 1.03, 1.03);
  transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
  -webkit-transform: scale3d(.97, .97, .97);
  transform: scale3d(.97, .97, .97);
  }
  100% {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  }
  @keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
  transform: scale3d(.3, .3, .3);
  }
  20% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
  -webkit-transform: scale3d(.9, .9, .9);
  transform: scale3d(.9, .9, .9);
  }
  60% {
  opacity: 1;
  -webkit-transform: scale3d(1.03, 1.03, 1.03);
  transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
  -webkit-transform: scale3d(.97, .97, .97);
  transform: scale3d(.97, .97, .97);
  }
  100% {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  }  
 
 .fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  animation-delay: 4s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
  }
  @keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
  } 
.ani-1s {animation-delay:1s;}
.ani-1_5s {animation-delay:1.5s;}
.ani-2s {animation-delay:2s;}
.ani-3s {animation-delay:3s;}
} /* xxx End_media_dummy_block */