._link{
	cursor: pointer;
	/* transition: color 0.2s ease-out; */
	transition: background 0.2s ease-out;
}
/*
._link.mod1:hover, ._link.mod1.active{
	text-decoration: underline;
}
*/
._link.mod2{
	
}

._link.mod2:hover, ._link.mod2.active{
	text-decoration: underline;
}



._link.mod_prev lord-icon{
	transform: rotate(180deg);
}

._link.mod_next lord-icon{
	transform: rotate(0deg);
}


._button{
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	font-size: 1em;
	line-height: 1.2em;
	color: #ffffff;
	text-align: center;
	padding: 0.8em 1.6em;
	border: 1px solid #C00000;
	background-color: transparent;
	cursor: pointer;
	/* width: 50%; */
	/* min-width: 10em; */
	/* max-width: 22em; */
	
	transition: color 0.2s ease-out, background 0.2s ease-out, box-shadow 0.2s ease-out;
}




._button_white{
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	font-size: 1em;
	line-height: 1.2em;
	color: #ffffff;
	text-align: center;
	padding: 0.8em 0.8em;
	border: 1px solid #ffffff;
	cursor: pointer;
	/* width: 50%; */
	/* min-width: 10em; */
	/* max-width: 22em; */
	
	transition: color 0.2s ease-out, background 0.2s ease-out, box-shadow 0.2s ease-out;
}



/* ._button:hover, ._button.active{ */
	/* background-color: #ffffff; */
	
/* } */
._button:hover{
	background-color: #C00000;
}

.red_hover:hover{
	background-color: #C00000;
	cursor: pointer;
}


.red_hover_not_link:hover{
	background-color: #C00000;
	transition: background 0.2s ease-out;
}


.green_background{
	background-color: #5F7229;
}

._green_button{
	position: relative;

	display: inline-block;
	box-sizing: border-box;
	vertical-align: middle;
	
	font-size: 1em;
	font-weight: 400;
	line-height: 1.2em;
	
	color: #ffffff;
	text-align: center;
	
	padding: 0.8em 1em;
	
	border: 1px solid #5F7229;
	border-radius: 0.5em;
	
	background-color: #5F7229;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 1em;
	
	outline: none;
	cursor: pointer;
	
	width: 100%;
	min-width: 10em;
	max-width: 22em;
	
	transition: color 0.2s ease-out, background 0.2s ease-out, box-shadow 0.2s ease-out;
}




._green_button:hover{
	background-color: #ffffff;
	color: #5F7229;
}

._green_button:hover ._svg{
	fill: #5F7229;
}

._button.mod_short{
	width: 100%;
	min-width: 8em;
	max-width: 14em;
}

._green_button.mod_short{
	width: 100%;
	min-width: 8em;
	max-width: 14em;
}

._button.mod_short_2{
	width: 100%;
	min-width: 5em;
	max-width: 10em;
}

._button.mod_green_background{
	border-radius: 0.5em;
	border: 1px solid #653000; 
	box-shadow: 0 0 0px rgba(0,0,0,0.2); 
	fill: #653000;
}


._button.mod_green_background:hover{
	background-color: #5F7229;
	border: 1px solid #5F7229;
	color: #ffffff;
}

._button.mod_green{
	color: #5F7229;
	border: 1px solid #5F7229;
}

._button.mod_brown_change{
	color: #653000;
	border: 1px solid #653000;
	fill: #653000;
}

._button.mod_brown_change:hover{
	background-color: #5F7229;
	color: #ffffff;
	border: 1px solid #5F7229;
	fill: #ffffff;
}


._button.mod_brown{
	color: #653000;
	border: 1px solid #653000;
	fill: #653000;
}

._button.mod_brown:hover{
	background-color: #5F7229;
	color: #ffffff;
	border: 1px solid #5F7229;
	fill: #ffffff;
}



._button.mod_green:hover{
	background-color: ;
}

._button.mod_transparent{
	padding-left: 3em;
    padding-right: 3em;
	color: transparent;
	border-color: #ffffff;
}

._button.mod_black{
	padding-left: 3em;
    padding-right: 3em;
	color: #ffffff;
	border-color: #ffffff;
}

._button.mod_white{
	padding-left: 3em;
    padding-right: 3em;
	color: #000000;
	border-color: #000000;
}


._button.mod_black:hover{
	background-color: rgb(124 124 124 / 20%);
}


._button.mod_black ._svg{
	position: absolute;
	right: 1em;
}

._button.mod_white ._svg{
	position: absolute;
	right: 1em;
	fill: #000000;
}


._button.mod_green ._svg{
	position: absolute;
	right: 1em;
	fill: #5DC559;
}



._button.mod_blue{
	color: #ffffff;
	background-color: var(--color_blue);
}

._button.mod_blue:hover{
	background-color: var(--color_blue_hover);
}

._button.mod_white{
	color: #2B4DA3;
	background-color: var(--color_white);
}

._button.mod_white:hover{
	background-color: var(--color_white_hover);
}

.js-hamburger:not(.active) ._svg.close{ display: none; }
.js-hamburger.active ._svg.open{ display: none; }



.js-hamburger_faq:not(.active) ._svg.close{ display: none; }
.js-hamburger_faq.active ._svg.open{ display: none; }





._icon{
	/* font-size: 1em; */
	position: relative;
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
	border: 1px solid transparent;
	width: 1em;
	height: 1em;
	padding: 0em;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;
	outline: none;
	transition: color 0.2s ease-out, background 0.2s ease-out, box-shadow 0.2s ease-out;
}

._icon.mod1{
	width: 3em;
	height: 3em;
	border: 1px solid #1E1E1E;
	border-radius: 50%;
	background-size: 50%;
}

._icon.mod2{
	width: 2.5em;
	height: 2.5em;
	border: 1px solid #ffffff;
	border-radius: 50%;
	background-size: 50%;
}





a.active > ._icon.hamburger:before{ opacity: 0; transform: rotate(90deg); }
a.active > ._icon.hamburger:after{ opacity: 1; transform: rotate(0deg); }


._icon.address{ background-image: url(/wp-content/themes/afina/assets/images/icon/address.svg); }
._icon.phone{ background-image: url(/wp-content/themes/afina/assets/images/icon/phone.svg); }
._icon.email{ background-image: url(/wp-content/themes/afina/assets/images/icon/email.svg); }






._svg{
	font-size: 1em;
	position: relative;
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
	height: 1em;
	width: 1em;
	fill: #006954;
	transition: all 0.2s ease-out;
}
._svg.rotate{
	border: 1px solid transparent;
}
._svg.rotate:hover{
	transform:  rotate(15deg);
	transition: all 0.2s;
}

._svg.mod_red_svg{
	fill: #C00000;
}

._svg.mod_wigth4_svg{
	width: 4em;
}

._svg.mod_wigth7_svg{
	width: 7em;
}
		
	
._svg_faq{
	font-size: 1em;
	position: relative;
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
	height: 1em;
	width: 1em;
	fill: #653000;
	transition: all 0.2s ease-out;
}


._svg_green_line{
	font-size: 1em;
	position: relative;
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	height: 1em;
	width: 5em;
	fill: #5F7229;
	transition: all 0.2s ease-out;
	padding-right: 6px;
}

._svg.mod_svg_filters_brown{
	fill: #653000;
}

._svg.mod_svg_filters_green{
	fill: #5F7229;
}

._svg.mod_svg_faq{
	fill: #ffffff;
}



/* ._svg:hover{ */

	/* position: relative; */
	/* display: inline-block; */
	/* vertical-align: middle; */
	/* box-sizing: border-box; */
	/* height: 1em; */
	/* width: 1em; */
	/* fill: #5f7229; */
	/* transition: all 0.2s ease-out; */
/* } */


._svg.mod1{
	font-size: 0.8em;
}

._svg.advantages{
	fill: #5F7229;
	min-height: 6em;
	min-width: 10em;
}

._svg.mod_white_bottom{
	font-size: 1em;
	fill: #FFFFFF;
	margin-left: 0.6em;
}

._svg.mod_black_icon{
	fill: #000000;
}

._svg.mod_green_icon{
	fill: #5F7229;
}

._svg.mod_black_icon:hover{
	fill: #5DC559;
}



._input{
	display: inline-block;
	box-sizing: border-box;
	vertical-align: middle;
	
	font-size: 1em;
	font-weight: 400;
	line-height: 1.2em;
	
	color: #000000;
	/* text-align: center; */
	
	/* padding: 0.5em 1em; */
	border: 0px solid transparent;
	border-bottom: 1px solid #000000;
	/* border-radius: 1.5em; */
	background-color: transparent;
	
	width: 100%;
	max-width: 14em;
	min-height: 3.2em;
	
	transition: color 0.2s ease-out, background 0.2s ease-out;
}



._input.width100{
	max-width: 100%;
}

._input.width90{
	max-width: 90%;
}
._input.width70{
	max-width: 70%;
}
._input.width80{
	max-width: 80%;
}

._input.large{
	padding: 1.0em 1.5em;
	min-height: 5.0em;
}

._input.large.center{
	padding-left: 0.5em;
	padding-right: 0.5em;
}

._input.error{
	box-shadow: 0em 0em 0em 2px #E31E25 !important;
	border-color: #E31E25 !important;
}

._input::-webkit-input-placeholder { color: #000000; }
._input:-ms-input-placeholder { color: #000000; }
._input::-ms-input-placeholder { color: #000000; }
._input::placeholder { color: #000000; }


._input.mod1{
	color: #ffffff;
	border-color: #C00000;
}

._input.mod1:focus{
	box-shadow: 0em 0em 0.1em 0.5px #C00000;
}

._input.mod_text{
	color: #ffffff;
	border-bottom: 1px solid #ffffff;
	padding: 0.5em 0em;
	min-height: initial;
	max-width: 20em;
}


._input.mod_text_black{
	color: #ffffff;
	border-bottom: 1px solid #000000;
	padding: 0.3em 0em;
	min-height: initial;
	max-width: 20em;
}



._input.mod_text::-webkit-input-placeholder { color: #000000; }
._input.mod_text:-ms-input-placeholder { color: #000000; }
._input.mod_text::-ms-input-placeholder { color: #000000; }
._input.mod_text::placeholder { color: #000000; }






._label{
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;
}

._label.mod1{
	width: 100%;
}

._label input[type=checkbox], ._label input[type=radio]{
	display: none;
}

._label .checkbox, ._label .radio, ._label .label{
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
}

._label .label.mod1{
	margin-bottom: 0.3em;
}

._label .label:hover{
	opacity: 1;
}

._label .checkbox, ._label .radio{
	font-size: 1em;
	position: relative;
	width: 2.0em;
	height: 2.0em;
	border: 2px solid $COLOR3;
	border-radius: 0.5em;
	margin-bottom: 0em;
}

._label.width100{
	width: 100%;
}

._label input[type=checkbox] + .checkbox + .label, ._label input[type=radio] + .radio + .label{
	width: calc(100% - 2em);
	padding-left: 0.5em;
}

._label input[type=checkbox]:checked + .checkbox:before, ._label input[type=radio]:checked + .radio:before{
	content: "";
	display: block;
	position: absolute;
	top: 0.2em;
	right: 0.2em;
	bottom: 0.2em;
	left: 0.2em;
	border-radius: 0.25em;
	background-color: $COLOR1;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;
}

._label input[type=checkbox]:checked + .checkbox:before{
	/* background-image: url(/wp-content/themes/afina/assets/images/svg/checkbox.svg); */
	/* transform: scale(1.2); */
}

._label .radio, ._label .radio:checked + .radio:before{
    border-radius: 50%;
}

._label input[type=checkbox]:checked + .checkbox + .label{
	opacity: 1;
}

._label input[type=checkbox].error + .checkbox{
	box-shadow: 0em 0em 0em 2px #ff0000;
	border-color: #ff0000;
	background-color: rgb(255 0 0 / 0.15);
}

._label .unit{
	position: absolute;
	top: 1em;
	right: 1em;
}

._label .unit + input{
	padding-right: 4em;
}

._label .label_title{
	color: #8A8989;
}

._label .label_input_button{
	position: absolute;
	top: 0em;
	right: 0em;
	width: 50%;
	width: calc(50% - 0.5em);
}




._label input[type=radio]:checked + ._button.mod_green{
	/* color: #5F7229; */
	background-color: #FFF1C0;
	/* border-color: #5F7229; */
}

._label input[type=radio]:checked + ._button.mod_brown{
	color: #ffffff;
	background-color: #5F7229;
	border: 1px solid #5F7229;
}















._ul li{
	display: inline-block;
	box-sizing: border-box;
	vertical-align: middle;
	width: 100%;
}

._ul.mod1 li{
	padding: 0.15em 0em;
}

._ul.mod2 li{
	padding: 0.2em 0em;
}

._ul.mod3 li{
	padding-top: 1em;
}

._ul.mod3 li:first-child{
	padding-top: 0em;
}

._ul.mod4 li{
	width: auto;
	padding-left: 1.5em;
}

._ul.mod4 li:first-child{
	padding-left: 0em !important;
}


._ul.mod2 li.haschild ._ul{
	margin-left: 1.5em;
}



._ul_result{
	font-size: 1em;
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	padding: 0.6em 1em;
	background-color: #f0f3f5;
	margin: 0em 0em 1em 0em;
	padding-left: 2em;
	border-radius: 0.5em;
}

._ul_result li{
	list-style-type: disc;
	padding: 0.2em 0em;
}

._ul_result.errors{
	border: 1px solid #ff9090;
	background-color: #ffe1e1;
}

._ul_result.success{
	border: 1px solid #90ff90;
	background-color: #e1ffe1;
}













._toggle_block .header{
	padding-bottom: 0.4em;
	margin-bottom: 0.4em;
	border-bottom: 1px solid #84C8DD;
	cursor: pointer;
}

._toggle_block .header .name{
	position: relative;
	padding: 0em 1em 0em 0em;
	font-weight: 600;
}

._toggle_block .header .name:before, ._toggle_block .header .name:after{
	position: absolute;
	top: 0%;
	right: 0%;
	bottom: 0%;
	width: 0.5em;
	color: #84C8DD;
	font-size: 1.8em;
	line-height: 0.8em;
	text-align: center;
	transition: opacity 0.2s ease-out;
	opacity: 0.5;
}

._toggle_block .header:hover .name:before, ._toggle_block .header:hover .name:after{
	opacity: 1;
}

._toggle_block.active .header .name:before{
	content: "-";
}

._toggle_block:not(.active) .header .name:after{
	content: "+";
}

._toggle_block .content{
	display: none;
	padding-bottom: 0.5em;
}

._toggle_block.active .content{
	display: block;
}



._popup{
	position: relative;
}

._popup .header .icon{
	font-size: 0.6em;
	margin-left: 0.5em;
}

._popup .content{
	position: absolute;
	/* left: 0%; */
	left: -44%;
	top: 120%;
	min-width: 12em;
	/* max-width: 100%; */
	/* z-index: 10; */
	z-index: 20000;
	text-align: left;
	padding: 0.5em 0em;
	border-radius: 5px;
	background-color: #ffffff;
	box-shadow: 0 0.1875rem 0.5625rem rgba(0, 0, 0, .15);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s ease-out;
}

._popup.right_popup .content{
	left: initial;
	right: 0%;
}

._popup.active .content{
	visibility: visible;
	opacity: 1;
}

._popup .content a{
	display: block;
	padding: 0.5em 1em;
}

._popup .content a:hover{
	background-color: #f1f1f1;
}

._popup .content a.active{
	font-weight: 600;
}


._select{
	display: inline-block;
	position: relative;
	font-size: 1em;
	width: 100%;
	padding: 0em;
	border-radius: 5px;
}

._select:after{
	content: "";
	position: absolute;
	top: 0em;
	right: 0em;
	bottom: 0em;
	width: 2em;
	background-image: url(/wp-content/themes/afina/assets/images/svg/arrow.svg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 1em;
	transition: transform 0.2s ease-out;
}

._select.active{
	z-index: 10;
}

._select.active:after{
	transform: rotate(180deg);
}

._select .value, ._select .values div{
	padding: 0.5em 1em;
}

._select .value, ._select .values{
	font-size: 1em;
	color: #000000;
	background-color: #ffffff;
	border: 1px solid #333333;
	border-radius: 5px;
}

._select .value{
	display: block;
    width: 100%;
	padding-right: 1.8em;
	padding: 0.5em 2em 0.5em 1em;
}

._select .value:disabled{
	background-color: #e2e2e2;
}

._select .value[readonly]{
	cursor: default;
}

._select.error{
	
}

._select .values{
	display: none;
	visibility: hidden;
	position: absolute;
    top: 100%;
    left: 0%;
    right: 0%;
	z-index: 1;
	max-height: 14em;
    overflow: auto;
	cursor: default;
	z-index: 10;
	opacity: 0;
}


._select.active .values{
	display: block;
	visibility: visible;
	opacity: 1;
	border-radius: 0px 0px 5px 5px;
}

._select .values.up{
	top: inherit;
	bottom: 100%;
}

._select.active .value{
	border-radius: 5px 5px 0px 0px;
}

._select .values div{
	min-height: 1.18em;
	transition: color 0.1s ease-out, background 0.1s ease-out;
}

._select .values div:hover, ._select .values div.active{
	color: #FFFFFF;
	background-color: #84C8DD;
}

._select .values div[data-value=""]{
	opacity: 0.5;
}

._select .values::-webkit-scrollbar{
	width: 0.5em;
}

._select .values::-webkit-scrollbar-button{
	background-color: transparent;
	height: 1.5em;
}

._select .values::-webkit-scrollbar-track{
	background-color: transparent;
}

._select .values::-webkit-scrollbar-thumb{
	border-radius: 1em;
	background-color: #c1c1c1;
}

._select .values::-webkit-scrollbar-thumb:hover{
	background-color: #909090;
}















._product_item{
	box-sizing: border-box;
	border: 0px solid #EFEFEF;
	background-color: #FFFFFF;
	border-radius: 0.5em;
	overflow: hidden;
	transition: box-shadow 0.2s ease-out;
}

._product_item .ratio_content{
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	border-radius: 0.5em;
}

._product_item .div_content{
	padding: 1em;
}

._product_item .div_content .div_button{
	visibility: hidden;
}

._product_item:hover{
	box-shadow: inset 0em 0em 0.6em rgba(0, 0, 0, 0.15);
}

._product_item:hover .div_content .div_button{
	transition-delay: 0.2s;
	visibility: visible;
}









._cartquantity{
	/* display: inline-block; */
	box-sizing: border-box;
	vertical-align: middle;
	transition: background 0.2s ease-out;
	display: flex;
    justify-content: space-evenly;
}

._cartquantity.active{
	/****/
}

._cartquantity > input{
	/* font-size: 1em; */
	font-size: 0.7em;
	display: inline-block;
	box-sizing: border-box;
	vertical-align: middle;
	text-align: center;
	background-color: transparent;
	border: 0;
	transition: background 0.2s ease-out;
}

._cartquantity > input[name="quantity"]{
	height: 2em;
	width: 2.5em;
}
._cartquantity.mod_cart > input[name="quantity"]{
	width: 6.5em;
}
._cartquantity > input[name="minus"]{
	/* border-radius: 0.5em 0em 0em 0.5em; */
}

._cartquantity > input[name="plus"]{
	/* border-radius: 0em 0.5em 0.5em 0em; */
}

._cartquantity > input[name="minus"], ._cartquantity > input[name="plus"]{
	cursor: pointer;
    box-sizing: border-box;
    width: 1em;
    height: 1em;
    /* border: 1px solid #006954; */
    /* border-radius: 0.7em; */
}
._cartquantity > input[name="clean"]{
	cursor: pointer;
    box-sizing: border-box;
    width: 2.5em;
    height: 2.5em;
    border: 1px solid #D16C55;
    border-radius: 0.7em;
	color: #ffffff;
	background-color: #D16C55;
	margin-left: 1em;
	line-height: 0.4em;
}

._cartquantity > input[name="minus"]:hover, ._cartquantity > input[name="plus"]:hover{
	
}

._cartquantity > input[name="plus"] {
    background-image: url(/wp-content/themes/afina/assets/images/svg/plus.svg);
    background-repeat: no-repeat;
    background-position: center;
}

._cartquantity > input[name="minus"] {
    background-image: url(/wp-content/themes/afina/assets/images/svg/minus.svg);
    background-repeat: no-repeat;
    background-position: center;
}


