/*!! By Nanod10 */
@charset "utf-8";

.fa.fa-1-5x{
	font-size: 1.5em;
}

/*--------------------------------------------------------------
# fonts
--------------------------------------------------------------*/
.roboto-thin {
	font-family: "Roboto", sans-serif;
	font-weight: 100;
	font-style: normal;
}

.roboto-regular {
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.roboto,
.roboto-medium {
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	font-style: normal;
}

.roboto-bold {
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.roboto-black {
	font-family: "Roboto", sans-serif;
	font-weight: 900;
	font-style: normal;
}



.montserrat-thin {
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 100;
	font-style: normal;
}
.montserrat-regular {
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}
.montserrat,
.montserrat-medium {
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}
.montserrat-bold {
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
}
.montserrat-black {
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 900;
	font-style: normal;
}

.poppins-light {
	font-family: "Poppins", sans-serif;
	font-weight: 300;
	font-style: normal;
}

.poppins-regular {
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.poppins-medium {
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-style: normal;
}

.poppins-semibold {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-style: normal;
}

.poppins-bold {
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.lead {
	font-size: 1.25rem;
	font-weight: 400;
}


/*
	Bootstrap 4 breakpoints mediaquerys
*/
 
/* 
Extra small devices (portrait phones, less than 576px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/
 
 
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  
 	.f-gt{
 		font-size: 1.5em;
 	}
}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
 
}
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
 
}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
    
}


/* Fuente */
.f-gt{
 	font-size: 1em;
}











/*========================================================================================================================*/
/*========================================================================================================================*/
/*========================================================================================================================*/
/*========================================================================================================================*/
/*========================================================================================================================*/



/* NANO GALERY 
	Editado por nano
*/

.nanogallery_gallerytheme_dark_lacarpinteria .nGY2GThumbnail {
    background: #FFF !important;
    border-color: #FFF !important;
    border-top-width: 10px;
    border-right-width: 10px;
    border-bottom-width: 10px;
    border-left-width: 10px;
}

.nanogallery_viewertheme_dark_lacarpinteria .nGY2Viewer {
     background: rgba(1, 1, 1, 0.85) !important; 
}



/*--------------------------------------------------------------
# Image Parallax
--------------------------------------------------------------*/

section.module.parallax {
	position: relative;
	height: 400px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

section.module.parallax .front-layer {
    z-index: 50;
 	overflow: hidden; 
    top: 0;
    botom: 0;
    width: 100%;
    /*height: 400px;*/
    height: 100%;
    display: block;
    position: absolute;
}

section.module.parallax .container {
	/*height: 400px;*/
	height: auto;
    z-index: 100;
    position: relative;
}
section.module.parallax h1 {
	color: rgba(255, 255, 255, 0.8);
	font-size: 48px;
	/*line-height: 600px;*/
	/*font-weight: 700;*/
	font-weight: 400;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax h3 {
	/*color: var(--theme-red);*/
	color: var(--theme-white);
    font-size: 38px;
    /*font-weight: 700;*/
	font-weight: 400;
    text-shadow: 0 0 10px rgba(0,0,0,.2);
}
section.module.parallax.bg-porton h3 {
	color: var(--theme-white);
}
section.module.parallax.bg-porton .text-gradient{
	text-transform: uppercase;
	font-size: 28px;
	background: linear-gradient(to right, var(--logo-secondary) 0%, var(--logo-primary) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


/*
section.module.parallax-1 {
	background-image: url("/img/parallax2.jpg");
}
*/
.bg-home-parallax{
	background-image: url("/img/parallax-home-background.jpg");
}
.bg-home-parallax .front-layer{
	background: rgba(0, 51, 102,0.25);
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fcc332+0,ffff00+100&1+0,0+100 */
	background: -moz-linear-gradient(-45deg, rgba(0, 51, 102,1) 0%, rgba(79, 79, 79,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, rgba(0, 51, 102,1) 0%, rgba(79, 79, 79,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, rgba(0, 51, 102,1) 0%, rgba(79, 79, 79,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00336611', endColorstr='#4F4F4F00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	height: 400px;
	overflow: hidden;
	/*background-position: 50% 50%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;*/
}

section.module.parallax-map {
	background-image: url("/img/parallax-map.jpg");
    height: 500px;
    background-position: center;
    background-position-y: center;
    border-top: var(--theme-red) 3px solid;
}

section.module.parallax-map .title {
    color: rgba(255, 255, 255, 0.8);
    font-size: 38px;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(0,0,0,.2);
}

section.module.parallax-map .texto {
	color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 0 10px rgba(0,0,0,.2);
}
section.module.parallax-map .btn {
	border: #FFF 3px solid;
}

@media all and (min-width: 600px) {
	section.module h2 {
		font-size: 42px;
	}
	section.module p {
		font-size: 20px;
	}
	section.module.parallax h1 {
		font-size: 96px;
	}
}
@media all and (min-width: 960px) {
	section.module.parallax h1 {
		font-size:90px;
	}
}











/*--------------------------------------------------------------
# Video Parallax
--------------------------------------------------------------*/

section.module.parallax-video {
	background: rgba(0, 51, 102,0.25);
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fcc332+0,ffff00+100&1+0,0+100 */
	background: -moz-linear-gradient(-45deg, rgba(0, 51, 102,1) 0%, rgba(79, 79, 79,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, rgba(0, 51, 102,1) 0%, rgba(79, 79, 79,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, rgba(0, 51, 102,1) 0%, rgba(79, 79, 79,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00336611', endColorstr='#4F4F4F00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	height: 400px;
	overflow: hidden;
	/*background-position: 50% 50%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;*/
}
section.module.parallax-video .container {
	height: 400px;
}
section.module.parallax-video h1 {
	color: rgba(255, 255, 255, 0.8);
	font-size: 48px;
	/*line-height: 600px;*/
	font-weight: 700;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax-video h3 {
	color: var(--theme-red);
    font-size: 38px;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(0,0,0,.2);
}

section.module.parallax-video .responsive-video {
	z-index: -100;
    overflow: hidden;
    top: -370px;
    position: fixed;
}




@media all and (min-width: 600px) {
	section.module h2 {
		font-size: 42px;
	}
	section.module p {
		font-size: 20px;
	}
	section.module.parallax h1 {
		font-size: 96px;
	}
}
@media all and (min-width: 960px) {
	section.module.parallax-video h1 {
		font-size:90px;
	}
}




/*



*/

.clients {
	background: #FFF;
}


.btn-outline-danger {
	color: var(--theme-button-alt);
	border-color: var(--theme-button-alt);
}

.btn-outline-alt:hover{
	background: var(--theme-button-alt);
}


.whatsapp-floating {
	position: fixed;
	width: auto;
	height: auto;
	bottom: 65px;
	right: 80px;
	/* background-color: #25d366; */
	color: #fff;
	border-radius: 50px;
	text-align: center;
	font-size: 30px;
	z-index: 100;
}
.whatsapp-floating:hover {
	color: #FFF;
}

.whatsapp-floating .whatsapp-icon::before {
	position: absolute;
	border-radius: 60px;
	/* background-color: #25d366; */
	margin: auto;
	text-align: left;
	line-height: 60px;
	height: 60px;
	display: block;
	width: 60px;
	z-index: 21;
	font-size: 73px;
	text-shadow: #000 1px 1px 3px;
}

.whatsapp-floating .whatsapp-icon::after {
	content: " ";
	position: absolute;
	border-radius: 60px;
	background-color: #25d366;
	margin: auto;
	text-align: left;
	line-height: 60px;
	height: 60px;
	display: block;
	width: 60px;
	font-size: 73px;
	z-index: 2;
	margin-left: 2px;
	text-shadow: #000 1px 1px 3px;
	box-shadow: #25d366 0px 0px 0px;
	transition: box-shadow ease .5s;
}
.whatsapp-floating:hover .whatsapp-icon::after {
	box-shadow: #25d366 0px 0px 50px;
	transition: box-shadow ease .5s;
}




/*
	Video Normal
	(asesoramiento)
*/
@media (max-width: 768px) {
	video {
		height: 75vh;
		margin: 2em 0;
	}
}
@media (min-width: 768px) {
	video {
		width: 100%;
		margin: 2em 0;
	}
}





/******************/

/* La Empresa */
.la-empresa-img{
	border: #FFF 10px solid;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 20px;
}
.la-empresa-img.rotate{
	/*border: #FFF 10px solid;*/
    /*box-shadow: rgba(0,0,0,0.5) 10px 10px 30px;*/
    transform: rotate(2deg);
}
.la-empresa-minigrid-container{
	text-align: center;
}
@media (max-width: 991px) {
	.la-empresa-img.mini-grid{
		margin: 10px !important;
		padding: 0 !important;
		max-width: 40%;
	}
}
@media (min-width: 992px) {
	section.overflow-visible {
		overflow: visible !important;
		z-index: 1000;
		position: relative;
	}
	.la-empresa-minigrid-container{
		margin-top: -25% !important;
		z-index: 1000;
		margin-left: -10%;
		margin-right: 10%;
		min-width: 445px;
		width: 445px;
		height: 900px;
	}
}

.la-empresa-img.mini-grid{
	margin: 10px !important;
    padding: 0 !important;
}

@media (min-width: 992px) {

	.la-empresa-img.mini-grid:nth-child(1) {
		rotate: -5deg;
		margin-top: 50px !important;
		margin-left: -50px !important;
		transform: scale(2);
	}

	.la-empresa-img.mini-grid:nth-child(2) {
		rotate: 4deg;
		margin-top: -20px !important;
		margin-left: 20px !important;
	}

	.la-empresa-img.mini-grid:nth-child(3) {
		rotate: 5deg;
		margin-top: 20px !important;
		margin-right: 90px !important;
		transform: scale(1.4);
	}

	.la-empresa-img.mini-grid:nth-child(4) {
		rotate: 2deg;
		margin-top: 0px !important;
		transform: scale(1.6);
	}

	.la-empresa-img.mini-grid:nth-child(5) {
		rotate: -4deg;
		margin-top: 30px !important;
		margin-left: -120px !important;
		transform: scale(1.5);
	}

	.la-empresa-img.mini-grid:nth-child(6) {
		rotate: 5deg;
		margin-top: 90px !important;
		margin-left: 150px !important;
		transform: scale(1.8);
	}
}

.la-empresa {
	/*overflow: hidden;*/
}
.video-empresa{
    width: 100%;
    border: var(--theme-red) 10px solid;
    border-radius: 3px;
    box-shadow: rgba(0,0,0,0.5) 0px 10px 25px;
    margin: 10px 0 50px 0;
}

.la-empresa .ul_valores{

}
.la-empresa .ul_valores li{
	padding: 10px;
	font-size: 1em;
	font-weight: bold; 
}


.servicios {
	overflow: hidden;
}
section.clima{
	background: #FFF;
}

/* Servicios */

.card{
	overflow: hidden;
    max-height: 320px;
    min-height: 320px;
    box-shadow: 0px 10px 10px rgba(0,0,0,0.5);
    border: none;
    border-left: 10px solid var(--theme-red);
}
.card img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	min-height: 320px;
	max-height: none;
	width: auto;
}
.card-body.absolute {
    position: absolute;
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    color: #FFF;
    font-weight: bold;
    min-height: 320px;
    max-height: 320px;
}
.card-body .card-title{
	font-weight: bold;
	font-size: 2.5em;
    color: rgba(255,255,255,0.8);
}
.card-body a.btn {
	position: absolute;
    bottom: 10px;
    right: 10px;
    width: 150px;
}


/* Servicios Detalle */
.servicios .image {
    width: 100%;
    border: #FFF 8px solid;
    box-shadow: rgba(0,0,0,0.5) 0 5px 10px;
}

.btn-custom {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

section#advice {
	min-height: 80vh;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: center;
}
section#advice-details {
	overflow: hidden;
}

.advice-details .icon-svg {
	max-height: 175px;
	min-height: 175px;
	height: 175px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: stretch;
	padding: 30px;

}
.advice-details .icon-svg img{
	shape-rendering: crispEdges;
	/*fill: url(#MyGradient);*/
	fill: #FFF;
	color: #FFF;
}
.advice-details .icon-title {
	color: var(--theme-grey-dark);
	font-size: 1.3em;
}

.list-card.row{
	background: #FFF;
	border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.15) 0 0 30px;
}
.list-card.col{

}

.list-card.col .info.icon {
	width: 175px;
	height: 175px;

	/*background: #C00;*/
	background: var(--theme-button);
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fcc332+0,ffff00+100&1+0,0+100 */
	background: -moz-linear-gradient(-45deg, var(--theme-button) 0%, rgba(79, 79, 79,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, var(--theme-button) 0%, rgba(79, 79, 79,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, var(--theme-button) 0%, rgba(79, 79, 79,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#428BCAFF', endColorstr='#4F4F4F11',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.5) 10px 10px 40px, rgb(66 139 202) -10px 0px 40px;

}
.list-card.row.left{
	border-right: var(--theme-links-over) 8px solid;
}
.list-card.row.right{
	border-left: var(--theme-links-over) 8px solid;
}
@media (min-width: 768px) {
	.list-card.row.left .list-card.col .info.icon {
		margin-left: -2.3rem;
		margin-right: 50px;
	}

	.list-card.row.right .list-card.col .info.icon {
		margin-right: -2.3rem;
		margin-left: 50px;
	}
}
@media (max-width: 768px) {
	.list-card.row.right .list-card.col .info.icon,
	.list-card.row.left .list-card.col .info.icon {
		margin: auto;
		margin-top: -2.3rem !important;
		margin-bottom: 50px !important;
	}
	.list-card.col .info.content {
		text-align: center;
	}
}

.list-card.col .info.content {
	flex: 1;
}

.productos img {
	max-width: 100%;
}


/*
	Asesoramiento Parallax Video
*/

#advice,#advice-details,
section:not(.video-parallax){
	position: relative;
	z-index: 1;
}
section.productos-images{
	position: unset;
	z-index: 1;
}

.video-parallax {
	margin: 0;
	padding: 0;
	position: relative;
	z-index: -1;
}

.video-parallax .front-mask{
	background-color: rgba(13, 30, 45, 0.6);
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	right: 0;
	z-index: 3;
	left: 0;
	bottom: 0;
	overflow: hidden;

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: center;
}
.video-parallax .video-container {
	position: relative;
	height: 100vh;
	width: 100vw;
	z-index: -1;
	overflow: hidden;
}



.video-parallax .video-inner-container {
	min-height: 100vh;
	min-width: 100vw;
	position: fixed;
	top: 0;
	left: auto;
	right: auto;
	bottom: auto;
	height: auto;
	width: auto;

	text-align: center;
}

@media (max-width: 768px) {
	.video-parallax video {
		min-height: 100vh;
		min-width: 100vw;
		max-height: 100vh;
		text-align: center;
		width: auto;
		height: auto;
		margin: auto;
		position: absolute;
		top: -2000px;
		bottom: -2000px;
		left: -2000px;
		right: -2000px;
	}
}
@media (min-width: 768px) {
	.video-parallax video {
		min-height: 100vh;
		min-width: 100vw;
		text-align: center;
		width: auto;
		height: auto;
		margin: auto;
		position: absolute;
		top: -2000px;
		bottom: -2000px;
		left: -2000px;
		right: -2000px;
	}
}

.custom-shape-divider-bottom-1733670353 {
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	z-index: 10;
}

.custom-shape-divider-bottom-1733670353 svg {
	position: relative;
	display: block;
	width: calc(100% + 1.3px);
	height: 50px;
	transform: rotateY(180deg);
}

.custom-shape-divider-bottom-1733670353 .shape-fill {
	/*fill: #f4f9fc;*/
	fill: var(--theme-background);
}

.custom-shape-divider-top-1733670556 {
	position: absolute;
	top: -2px;
	left: 0;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	transform: rotate(180deg);
	z-index: 10;
}

.custom-shape-divider-top-1733670556 svg {
	position: relative;
	display: block;
	width: calc(229% + 1.3px);
	height: 78px;
	transform: rotateY(180deg);
}

.custom-shape-divider-top-1733670556 .shape-fill {
	/*fill: #F4F9FC;*/
	fill: var(--theme-background);
}