/*
Theme Name: Bronces y Aluminios
Theme URI: https://www.broncesyaluminios.com.co
Author: Comercial Web
Author URI: https://www.comercialweb.com.co
Description: Comercial Web
Version: 6.0.6
License: Commercial
License URI: http://themeforest.net/licenses/regular_extended
Tags: woocommerce, corporate, ecommerce, responsive, blue, black, green, white, light, dark, red, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: Bronces y Aluminios
*/

/*************** ADD YOUR CUSTOM CSS HERE  ***************/

.bypostauthor { display: block; }


.services2-loop > .wpb_column  {
border: 1px solid var(--white-dark);
    margin: 20px;
    padding-bottom: 0px;
    padding: 30px 30px;
    -webkit-transition: var(--normal-transition);
    -o-transition: var(--normal-transition);
    transition: var(--normal-transition);
    max-width: -webkit-calc(33.3% - 40px);
    max-width: -moz-calc(33.3% - 40px);
    max-width: -ms-calc(33.3% - 40px);
    max-width: calc(33.3% - 40px);
}
	.services2-loop > .wpb_column.no-border {
		border-color: transparent;
		max-width: -webkit-calc(16.665% - 40px);
		max-width: -moz-calc(16.665% - 40px);
		max-width: -ms-calc(16.665% - 40px);
		max-width: calc(16.665% - 40px);
	}
	.services2-loop > .wpb_column:hover {
		box-shadow: 0px 0px 15px rgba(0,0,0,0.15);
	}
		.services2-loop > .wpb_column.no-border:hover {
			box-shadow: 0px 0px 15px rgba(0,0,0,0);
		}

	.service2-item {
	    font-size: 10pt;
		text-align: center;
	}
		.service2-item img {
			height: auto;
    /* -webkit-filter: grayscale(1); */
    /* filter: grayscale(1); */
    /* opacity: 0.5; */
    /* width: 100px; */
    /* -webkit-transition: var(--normal-transition); */
    -moz-transition: var(--normal-transition);
    -ms-transition: var(--normal-transition);
    /* transition: var(--normal-transition); */
		}
			.service2-item:hover img {
				-webkit-filter: grayscale(0);
				filter: grayscale(0);
				opacity: 1;
			}
		.service2-item h1 {
			color: #191818;
			font-size: 14pt;
			font-weight: bold;
		}
		.service2-item a.button {
font-size: var(--xsm-text);
    margin-top: 0px;
    padding: 10px 20px;
}

.opacity2-layer-bg {
	position: relative;
}
	.opacity2-layer-bg:before {
		background-color: rgba(0, 0, 0, 0.52);
		bottom: 0px;
		content: '';
		display: block;
		left: 0px;
		position: absolute;
		right: 0px;
		top: 0px;
		z-index: 1;
	}


.title {
    color: #000000;
    letter-spacing: 0px;
    font-weight: 800;
    font-size: 36px;
    line-height: 48px;
	font-family: "Montserrat", Sans-serif;
}

.text-center{text-align:center;}


.subtitle {
    font-size: 14pt;
    color: #000000;
}

.banner-interno {
    background-image: url(https://www.broncesyaluminios.com.co/wp-content/uploads/2021/07/banner1.jpg);
    background-attachment: fixed;
    padding: 5% 5%;
    background-repeat: no-repeat;
	background-size: contain;
   
}

.vc_tta.vc_tta-style-modern .vc_tta-tab>a {
    border-width: 1px;
    background-image: linear-gradient(to bottom,rgb(255 255 255 / 0%) 0,rgb(255 255 255 / 0%) 100%) !important;}


.bg-bloque {
    background-image: url(https://www.selagemtermico.com.co/wp-content/uploads/2021/06/bloque.png);
    background-attachment: fixed;
    padding: 5% 5%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}




/**** BOTONES SERVICIOS ***/

.grid {
	overflow: hidden;
	margin: 0;
	/*padding: 3em 0 0 0;*/
	width: 100%;
	list-style: none;
	text-align: center;
}

/* Common style */
.grid figure {
	position: relative;
    z-index: 1;
    display: inline-block;
    overflow: hidden;
    margin: 6px;
    min-width: 238px;
    max-width: 343px;
    max-height: 360px;
    height: 365px;
    background: #3085a3;
    text-align: center;
    cursor: pointer;
	
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	opacity: 0.8;
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	    word-spacing: 11px;
	    color: white !important;
	font-weight: 300;
}

.grid figure h2 span {

    color: white !important;
	font-weight: 800;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}

/* Individual effects */
/*---------------*/
/***** Oscar *****/
/*---------------*/

figure.effect-oscar {
	/*background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
	background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);*/
	
    background-color: #313131;
}

figure.effect-oscar img {
	opacity: 0.9;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-oscar figcaption {
	padding: 3em;
	background-color: rgb(29 35 39 / 34%);

	-webkit-transition: background-color 0.35s;
	transition: background-color 0.35s;
}

figure.effect-oscar figcaption::before {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	border: 1px solid #fff;
	content: '';
}

figure.effect-oscar h2 {
	margin: 20% 0 10px 0;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
}

figure.effect-oscar figcaption::before,
figure.effect-oscar p {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(0);
	transform: scale(0);
}

figure.effect-oscar:hover h2 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-oscar:hover figcaption::before,
figure.effect-oscar:hover p {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-oscar:hover figcaption {
	background-color: rgba(58,52,42,0);
}

figure.effect-oscar:hover img {
	opacity: 0.4;
}

/******/

/***** BOTONES DE WPP Y LLAMADA ***/

.wpp-button {
	bottom: 38%;
	position: fixed;
	right: 10px;
	-webkit-transition: top .4s ease;
	-moz-transition: top .4s ease;
	-ms-transition: top .4s ease;
	transition: top .4s ease;
	    z-index: 900000;
}
	.wpp-button a {
		color: #FFF;
		text-decoration: none;
	}
	.wpp-button .target {
		background-color: #43c358;
		border-radius: 5px;
		display: inline-block;
		line-height: 100%;
		padding: 10px 15px;
		position:relative;
	}
		.wpp-button .target:before {
			content: '';
			border-left: 10px solid #43c358;
			border-top: 8px solid transparent;
			border-bottom: 8px solid transparent;
			height: 0;
			position: absolute;
			left: 100%;
			top: -webkit-calc(50% - 8px);
			top: -moz-calc(50% - 8px);
			top: calc(50% - 8px);
			width: 0;
		}
	.wpp-button .icono {
		background-color: #43c358;
		border-radius: 50%;
		display: inline-block;
		font-size: 20px;
		height: 40px;
		line-height: 40px;
		margin-left: 10px;
		text-align: center;
		margin-top: -3px;
		vertical-align: middle;
		width: 40px;
	}

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