/*
Theme Name: Porto Child
Theme URI: https://www.portotheme.com/wordpress/porto
Author: P-THEMES
Author URI: https://www.portotheme.com/
Description: Porto Responsive WordPress + eCommerce Theme.
Version: 1.1
Template: porto
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
*/

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


/*
*
* BURCSA MOD
*
*/
#brandajandek-ketoszlop .porto-wrap-container {
	padding-left: 22px;
	padding-right: 22px;
}
#Productaccordion {
	width: 100%;
}
#Productaccordion .accordion-header {
	margin-top: 0;
}

#Productaccordion .accordion-item {
	counter-increment: accordion-counter;
	position: relative;
}

.accordion-button:not(.collapsed) {
    color: #222529;
    font-weight: 600;
    background-color: #FFFFFF;
}

#Productaccordion .accordion-item .accordion-header .accordion-button::before {
	content: counter(accordion-counter) ". ";
    margin-right: 8px;
    font-weight: bold;
    color: #ffffff;
    background: #7ed957;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    padding: 0;
}

#Productaccordion .accordion-button:not(.collapsed)::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23222529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	transform: rotate(-180deg);
}

#positionModal .modal-content h2 {
	text-align: center;
}

#position-images {
    width: 100%;
    max-width: 50vw;
    text-align: center;
}

#position-images .position-container {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    width: 20%;
    padding: 0px;
    height: 100%;
}

#position-images img {
    cursor: pointer;
    width: 100%;
    height: 200px;
    border: 20px solid transparent;
    object-fit: contain;
}

#position-images img:hover, #position-images img.selected {
    box-shadow: 0px 0px 2px #bfbfbf;
}

.position-name {
    margin-top: 5px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.calculation-result, .color-number-select, .technique-select, .position-image {
	vertical-align: middle;
}

.position-image p {
	text-align: center;
    margin-bottom: 0;
    margin-top: 10px;
    font-weight: 600;
    color: #333333;
}

.remove-position-button {
    position: absolute;
    top: 0%;
    right: 0px;
    width: 28px;
    border-radius: 50%;
    height: 28px;
    text-align: center;
    padding: 0;
    letter-spacing: 1px;
    font-weight: 600;
    background: #7ed957;
    color: #FFFFFF;
    border: 0;
}

.position-image {
    display: inline-block;
    width: 25%;
    text-align: center;
}

.technique-select {
	display: inline-block;
    margin-left: 2%;
    margin-right: 2%;
    width: 25%;
}

.color-number-select {
	display: inline-block;
    margin-left: 2%;
    margin-right: 2%;
    width: 25%;
}

.calculation-result {
    position: relative;
    width: 100%;
    margin: 0;
    text-align: center;
}

.calculation-result {
    margin-top: 15px;
    font-weight: 600;
}


/* HTML: <div class="loader"></div> */
.brandajandek-loader {
	display: none;
	z-index: 10;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #25b09b;
	--_m: 
	conic-gradient(#0000 10%,#000),
	linear-gradient(#000 0 0) content-box;
	-webkit-mask: var(--_m);
	      mask: var(--_m);
	-webkit-mask-composite: source-out;
	      mask-composite: subtract;
	animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}

@media (min-width: 768px) {
	#brandajandek-ketoszlop .porto-wrap-container .row {
		justify-content: space-between;
	}
	#brandajandek-ketoszlop .porto-wrap-container .col-md-6 {
		width: 49%;
	}
    
}

@media (max-width: 1640px) {
	#brandajandek-ketoszlop .porto-wrap-container .col-md-6 {
        padding: 50px !important;
	}
}