/*
Theme Name:	Plantilla per tronikparts
Theme URI:	https://tronikparts.com
Description:	tronikparts.com. Com a base parteix de la DIVI.
Author:	mirulu@gmail.com
Template:	Divi
Version:	1.0.0
Tags: Els mateixos que Divi
Text Domain:  divi-tronikparts
*/

@import url("../Divi/style.css");

.et_pb_animation_top.et-animated {
    filter: grayscale(100%);
	 -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
}
div.et_pb_section .et_pb_section_0, div.et_pb_section.et_pb_section_0 {
    padding-top:6vw !important;
    padding-bottom: 6vw !important;
}
.productos-grid {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none; /* Elimina los estilos predeterminados de lista */
    padding: 0; /* Elimina el padding predeterminado */
}
.productos-grid li {
    flex: 1 1 calc(33.333% - 20px); /* Asigna el ancho para 3 columnas, ajusta el 20px según tu margen */
    margin: 0px; /* Ajusta el margen para crear espacio entre los elementos */
}
/* Estilo base para la lista */
.filtros {
    list-style: none; /* Elimina los marcadores de lista */
    padding: 0; /* Elimina el padding predeterminado */
    margin: 0; /* Elimina el margen predeterminado */
    display: flex; /* Alinea los elementos de lista en línea y permite manejo de espacio */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en la siguiente línea si no hay espacio */
    gap: 20px; /* Espacio entre los elementos de la lista */
}

/* Estilo para los elementos de la lista */
.filtros li {
    display: flex; /* Permite la alineación de los elementos internos */
    align-items: center; /* Alinea verticalmente los elementos internos */
    margin-bottom: 10px; /* Espacio debajo de cada elemento de lista */
}

/* Estilo para los inputs y selects dentro de la lista */
.filtros li input[type='text'],
.filtros li select {
    width: 100%; /* Ocupa todo el ancho disponible */
    padding: 10px; /* Espacio interno para texto */
    border: 1px solid #ccc; /* Borde similar al de la imagen */
    border-radius: 4px; /* Bordes redondeados */
}

/* Estilo para los labels de los campos de formulario */
.filtros li label {
    margin-right: 10px; /* Espacio a la derecha del label */
}

/* Estilo para el botón de búsqueda */
.filtros li input[type='submit'] {
    padding: 10px 20px; /* Espacio interno más amplio */
    background-color: #f2f2f2; /* Color de fondo similar al de la imagen */
    border: 1px solid #ccc; /* Borde similar al de la imagen */
    border-radius: 4px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor a una mano cuando se pasa sobre el botón */
}

/* Estilo para los elementos cuando están enfocados */
.filtros li input:focus,
.filtros li select:focus {
    outline: none; /* Elimina el contorno predeterminado */
    border-color: #666; /* Cambia el color del borde al enfocar */
}

/* Media queries para responsividad */
@media (max-width: 768px) {
    .filtros {
        flex-direction: column; /* Coloca los elementos en una sola columna en pantallas pequeñas */
    }
    .filtros li {
        width: 100%; /* Ocupa todo el ancho disponible */
    }
}


#footer-info {
	
}
h1,h2,h3,h4,h5,h6 {
	color: #230850 !important;
}
.et_pb_blurb_1 .et_pb_main_blurb_image .et_pb_image_wrap, .et_pb_blurb_0 .et_pb_main_blurb_image .et_pb_image_wrap {
    width: 120px !important;
	border-radius: 0px !important;
}
.et_color_scheme_orange #top-header {
	background:#230850 !important;
}
.et_pb_number_counter_0.et_pb_number_counter h3, .et_pb_number_counter_0.et_pb_number_counter h4 {
	 color:#ED6240 !important;
 }
/*menus */
#top-menu a {
	 color:#ED6240; 
 }
/*menus*/
.et_color_scheme_orange a {
    color: #ED6240;
}
body #page-container .et_pb_section .et_pb_button_0 {
    color: #ffffff !important;
    border-color: #ED6240 !important;
    background-color: #ED6240 !important;
}
/** Gravity Form **/

/* Paginació - Passos */
.gform_wrapper .gf_page_steps {
	border	: none !important;
	display	: flex;
	justify-content	: space-between;
	margin	: 50px 0 !important;
	padding	: 0 !important;
	position	: relative;
}

.gform_wrapper .gf_page_steps::before {
	background-color	: #333;
	content	: "";
	display	: block;
	height	: 1px;
	position	: absolute;
	top	: 35px;
	width	: 100%;
	z-index	: -1;
}

.gform_wrapper .gf_page_steps .gf_step {
	background-color	: #FFF;
	display	: flex;
	flex-direction	: column;
	height	: auto;
	justify-content	: flex-start;
	margin	: 0 5px;
	opacity	: 1 !important;
	padding	: 0 5px;
	width	: 150px;
}

.gform_wrapper .gf_page_steps .gf_step_first {
	margin-left	: 0;
	padding-left	: 0;
}

.gform_wrapper .gf_page_steps .gf_step_last {
	margin-right	: 0;
	padding-right	: 0;
}

.gform_wrapper .gf_step_clear {
	display	: none !important;
}

.gform_wrapper .gf_page_steps span.gf_step_number {
	border	: 1px solid #333;
	border-radius	: 100px;
	display	: block;
	font-size	: 20px !important;
	font-family	: inherit !important;
	height	: 30px;
	margin	: 20px auto 0 auto !important;
	line-height	: 30px;
	text-align	: center;
	width	: 30px;
}

.gform_wrapper .gf_page_steps .gf_step_active .gf_step_number {
	background-color	: #ED6240;
	height	: 70px;
	line-height	: 70px;
	margin-top	: 0 !important;
	width	: 70px;
}

.gform_wrapper .gf_step span.gf_step_label {
	display	: none !important;
	text-align	: center;
	text-transform	: uppercase;
}


.gform_wrapper .gf_step.gf_step_active span.gf_step_label {
	display	: inline-block !important;
}

/* Paginació - Footer */
.gform_wrapper .gform_page_footer {
	border-top	: none !important;
}

/* Labels */
.gform_wrapper .gfield.no-label .gfield_label {
	display	: none;
}

/* Camps de text */
.gform_body input[type=text],
.gform_body input[type=password] {
	background-color	: #DDD;
	border	: none;
	border-radius	: 9px;
	color	: #000;
	height	: 36px;
	line-height	: 36px !important;
	padding	: 0 9px !important;
}

/* Camps de text que segueixen botons radio (p.e. Quan hi ha la possibilitat de seleccionat "Altres" en una llista de radios */
#et-main-area .gform_wrapper li.gfield ul.gfield_radio li input[type="radio"] + input[type="text"] {
	width	: 90% !important;
	width	: calc(100% - 30px) !important;
}

/* Caixes de text */
.gform_body textarea {
	background-color	: #DDD;
	border	: none;
	border-radius	: 9px;
	color	: #000;
	padding	: 5px 9px !important;
}

/* Selects */
.gform_body .ginput_container_select {
	background-color	: #DDD;
	border-radius	: 9px;
	overflow	: hidden;
	position	: relative;
}

.gform_body .ginput_container_select select {
	background-color	: transparent;
	border	: none;
	color	: #000;
	height	: 36px;
	line-height	: 36px;
	padding	: 0 29px 0 9px !important;
	width	: calc(100% + 20px) !important;
}

.gform_body .ginput_container_select select::-ms-expand {
	display	: none;
}

.gform_body .ginput_container_select::after {
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #333;
	bottom: 0;
	content	: "";
	display	: block;
	height: 0;
	margin: auto;
	pointer-events	: none;
	position: absolute;
	right: 10px;
	top: 0;
	width: 0;
}

/* select "Chosen" */
.gform_body .chosen-container-multi .chosen-choices {
	background-color	: #DDD !important;
	background-image	: none !important;
	border	: none !important;
	border-radius	: 9px;
	color	: #000;
	line-height	: 36px;
	padding	: 0 9px !important;
}

.gform_body .chosen-container-active .chosen-choices {
	box-shadow	: none !important;
}

.gform_body .chosen-container-multi .chosen-choices li.search-choice {
	border: none !important;
	border-radius: 9px !important;
	background-color: #f0f0f0 !important;
	background-image: none !important;
	box-shadow	: none !important;
	color: #000 !important;
	font-weight: 400;
	padding-bottom : 6px !important;
	padding-top : 6px !important;
}

.gform_body .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
	top	: 8px !important;
}

/* Date picker (amb icona) */
.gform_body .ginput_container_date img.ui-datepicker-trigger {
	background-color	: #ED6240;
	border-radius	: 9px;
	height	: 36px !important;
	padding	: 10px;
	vertical-align	: bottom;
	width	: 37px !important;
}

@media all and (max-width: 640px) {
	.gform_wrapper input.datepicker_with_icon.large,
	.gform_wrapper input.datepicker_with_icon.medium,
	.gform_wrapper input.datepicker_with_icon.small {
		width	: calc(100% - 44px) !important;
	}
	.et_pb_text_6 h3 {
		font-size:43px !important;
	}
}

/* Checkbox */
.gform_wrapper .gfield_checkbox li input[type="checkbox"] {
	margin-right	: 8px;
}

.gform_body .gfield_checkbox input[type=checkbox] + label::before {
	background-color	: #FFF;
	border	: 1px solid #ACACAC;
	border-radius	: 5px;
	content	: "";
	cursor	: pointer;
	display	: block;
	left	: 0px;
	line-height	: 20px;
	height	: 20px;
	margin-top	: -10px;
	position	: absolute;
	text-align	: center;
	top	: 50%;
	width	: 20px;
}

.gform_body .gfield_checkbox input[type=checkbox]:focus + label::before {
	border	: 1px solid #000;
	box-shadow	: none;
}

.gform_body .gfield_checkbox input[type=checkbox]:checked + label::before {

	content	: "V";
	font-size	: 16px;
}

.gform_body .gfield_checkbox input[type=checkbox]:disabled + label::before {
	background-color	: #DDD;
	color	: #999;
}

/* Botons */
.gform_footer .gform_button,
.gform_page_footer .button {
	background-color	: #ED6240;
	border	: none;
	border-radius	: 9px;
	color	: #fff;
	line-height	: 36px;
	padding	: 0 20px !important;	
}

.gform_footer .gform_button:focus,
.gform_page_footer .button:focus {
	box-shadow	: 0 0 1px 1px #B4BD17;
}