
/* .mrj-xbox */
/* .mrj-bx */
/* .mrj-xb */

.mrj-bd1 {
	--features-height: 200px;

	--gradient-1: #FA8C05;
	--gradient-2: #FFD414;

	--gradient-1-0: rgb(250, 140, 5, 0.3);
	--gradient-2-0: rgb(255, 212, 20, 0.3);

	--title-color: #df7b00;
	--title-span-color: #fb9407;

	--stroke: #845801;
	--stroke: #fff; /* промяна */
	--fill-icon: #fa8c05;
	--fill-small-icon: #fff;
	--list-icon-color: #06AA46;

}

.mrj-bd1 {
	position: relative;
	border-radius: 15px;
}

.mrj-bd1:before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 15px;
	box-shadow: 0px 0px 15px #00000054;
	background: conic-gradient(var(--gradient-2) 25deg, var(--gradient-1) 30deg , var(--gradient-2) 50deg, var(--gradient-1) 70deg,var(--gradient-2) 100deg, var(--gradient-1) 120deg , var(--gradient-2) 140deg, var(--gradient-1) 160deg, var(--gradient-2) 180deg, var(--gradient-1) 200deg, var(--gradient-2) 220deg, var(--gradient-1) 240deg, var(--gradient-2) 260deg, var(--gradient-1) 280deg, var(--gradient-2) 300deg, var(--gradient-1) 320deg, var(--gradient-2) 360deg);
}

.mrj-bd1-inner {
	position: relative;
	overflow: hidden;
	height: 100%;
	background: #fff;
	border-radius: 15px;
	padding-bottom: 50px;
}

/******************************/
/* фона който е изкривен на Х */
.mrj-bd1 .bd1_features {
	height: var(--features-height);
	display: grid;
	place-items: center;
	margin-bottom: 60px;
}
.mrj-bd1 .bd1_features:after,
.mrj-bd1 .bd1_features:before {	
	content: "";
	position: absolute;
	top: -70px;
	width: 110%;
	height: calc(var(--features-height)*1.3);	
	background: linear-gradient(45deg,#FA8C05, #FFD414 70%);
	transform: skewY(-20deg);
	box-shadow: 0px 0px 8px #424242;
}
.mrj-bd1 .bd1_features:before {
	background: linear-gradient(135deg, #FFD414, #FA8C05 93%);
	transform: skewY(20deg);
}

/* аимацията на картинката с точките която под bd1_features */
.mrj_bd1_circles {
	position: absolute;
	background-image: url('data:image/svg+xml,<svg width="500" height="500" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><g style="fill:%23fff;"><circle cx="41.656677" cy="167.06889" r="25" /><circle cx="92.805893" cy="95.900352" r="10" /><circle cx="53.418476" cy="275.40628" r="10" /><circle cx="77.150826" cy="382.12988" r="10" /><circle cx="474.46631" cy="170.82433" r="10" /><circle cx="287.46631" cy="277.82431" r="10" /><circle cx="173.46631" cy="218.82433" r="10" /><circle cx="137.67291" cy="205.26631" r="10" /><circle cx="410.28717" cy="193.03798" r="10" /><circle cx="111.78185" cy="268.88837" r="10" /><circle cx="278.19363" cy="139.00908" r="10" /><circle cx="474" cy="59" r="10" /><circle cx="265" cy="337" r="10" /><circle cx="162.06346" cy="70.867996" r="10" /><circle cx="24.893934" cy="26.824316" r="10" /><circle cx="243.13431" cy="261.24951" r="10" /><circle cx="374.37332" cy="31.443724" r="10" /><circle cx="245.92032" cy="402.78928" r="10" /><circle cx="414.04941" cy="460.99194" r="10" /><circle cx="406.89792" cy="329.80331" r="10" /><circle cx="328.34741" cy="46.640923" r="10" /><circle cx="219.11848" cy="129.49127" r="10" /><circle cx="381.57355" cy="86.030754" r="5" /><circle cx="39.310661" cy="88.050865" r="5" /><circle cx="133.90588" cy="431.27979" r="5" /><circle cx="299.1994" cy="318.23431" r="5" /><circle cx="130.09311" cy="27.033831" r="5" /><circle cx="97.228348" cy="141.12181" r="5" /><circle cx="180.89856" cy="260.67532" r="5" /><circle cx="165.53033" cy="396.5433" r="5" /><circle cx="212.83511" cy="314.37564" r="5" /><circle cx="90.583603" cy="216.85271" r="5" /><circle cx="293" cy="175" r="5" /><circle cx="334" cy="145" r="5" /><circle cx="391" cy="139" r="5" /><circle cx="342" cy="182" r="5" /><circle cx="21" cy="228" r="5" /><circle cx="77" cy="325" r="5" /><circle cx="329" cy="104" r="5" /><circle cx="400" cy="255" r="5" /><circle cx="340.15515" cy="364.10422" r="5" /><circle cx="285.34506" cy="74.486801" r="5" /><circle cx="19.59248" cy="353.0155" r="5" /><circle cx="444.0961" cy="291.05884" r="5" /><circle cx="461.46631" cy="432.82431" r="5" /><circle cx="401.46631" cy="418.82431" r="5" /><circle cx="471.88287" cy="485.02521" r="5" /><circle cx="402.88287" cy="490.06134" r="5" /><circle cx="280.46631" cy="493.82431" r="5" /><circle cx="288.46631" cy="416.82431" r="5" /><circle cx="221.46631" cy="363.82431" r="5" /><circle cx="66.466309" cy="493.82431" r="5" /><circle cx="181.46631" cy="491.82431" r="5" /><circle cx="35.466309" cy="312.82431" r="5" /><circle cx="443.96936" cy="40.888966" r="5" /><circle cx="351.12372" cy="308.97272" r="10" /><circle cx="330.9003" cy="489.07303" r="10" /><circle cx="120.02213" cy="480.13651" r="10" /><circle cx="486.46631" cy="321.82431" r="10" /><circle cx="466.2406" cy="229.05373" r="10" /><circle cx="147.71703" cy="336.05853" r="25" /><circle cx="239.55582" cy="201.04028" r="25" /><circle cx="159.33487" cy="144.5887" r="25" /><circle cx="226.868" cy="462.17786" r="25" /><circle cx="50.91848" cy="448.93146" r="25" /><circle id="path1-8-0" cx="429.27975" cy="380.10144" r="25" /><circle id="path1-8-6" cx="81.558128" cy="43.834644" r="25" /><circle id="path1-5" cx="430.9115" cy="110.57586" r="25" /><circle id="path1-1" cx="339.96039" cy="252.53334" r="25" /><circle cx="347.20206" cy="423.58127" r="25" /><circle cx="226.31036" cy="48.701962" r="25" /></g></svg>');
	width: 500px;
	height: 500px;
	animation: 30s mrj_bd1_circles  0s linear infinite;
	z-index: 1;
	opacity: 0.15;
	/* aspect-ratio: 1/1; */
	background-repeat: no-repeat;
	background-size: 100%;
	pointer-events: none;
}
@keyframes mrj_bd1_circles  {
	50% { transform: rotateZ(180deg); }
	100% {  transform: rotateZ(360deg); }
}

/* фона който е изкривен на Х */
/******************************/


/* малката икона в страни */
/* ако не успея да сложа калс в svg да го оставя така с .bd1_features > svg */
.bd1_features > svg,
svg.bd1_features_small_icons  {
	position: absolute;
	left: 80%;
	top: 160px;	
	width: 50px;
	height: 50px;
	fill: #fff;
	color: #fff;
	z-index: 2;
}


/***********/
/* иконата */
.mrj-bd1 .bd1_features_icon {
	position: relative;
	display: grid;
	place-items: center;	
	cursor: pointer;
	z-index: 1;
}
.mrj-bd1 .bd1_features_icon svg {
	width: 70px;
	stroke: #845801;
	stroke-width: 2;
	stroke-dasharray: var(--stroke-dasharray);
	stroke-dashoffset: var(--stroke-dasharray);
	fill: #fff;
	fill: transparent; /* промяна */
	color:  #fff;
	color:  #transparent; /* промяна */
	z-index: 1;
}
.mrj-bd1 .bd1_features_icon svg path {
	vector-effect: non-scaling-stroke;
}

/* анимация на svg когато се отваря да се очертава и да се променя цвета */
.mrj-bd1:not(.mrj-bd1--sun-ray) .bd1_features_icon.bd1_open svg {
	animation: 2s bd1_svg_stroke 1.5s linear forwards, 0.4s bd1_svg_no_stroke_fill_color 3.5s linear forwards;	
}
/* по-бърза анимация само на иконата и span за да не е досадно */
.mrj-bd1:not(.mrj-bd1--sun-ray).mrj-bd1--fast-animation .bd1_features_icon.bd1_open svg {
	animation: 1.5s bd1_svg_stroke 0s linear forwards, 0.4s bd1_svg_no_stroke_fill_color 1.5s linear forwards;	
}

@keyframes bd1_svg_stroke {
	0% { stroke-dashoffset: var(--stroke-dasharray); 	}
	100% { stroke-dashoffset: 0; 	}
}
@keyframes bd1_svg_no_stroke_fill_color {
	100% {
		fill: #fa8c05;
		stroke-width: 0;	
	}
}
/* иконата */
/***********/


/************************************************************/
/* облия пръстен, фона под иконата и белия цвят под иконата */
/* белия цвят под иконата е само за анимация за плано сменяне на цвета */

/* бял свят под иконата */
.bd1_features_overlay {
	position: absolute;	
	background: #fff;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	z-index: 0;
	opacity: 0;
}
/* при отваряне плавно показване на overlay белия цвят */
.mrj-bd1:not(.mrj-bd1--sun-ray) .bd1_features_icon.bd1_open .bd1_features_overlay {
	animation: 0.4s mrj_bd1_svg_overlay 3.5s linear forwards;
}
/* отваряне по-бърза анимация */
.mrj-bd1:not(.mrj-bd1--sun-ray).mrj-bd1--fast-animation .bd1_features_icon.bd1_open .bd1_features_overlay {
	animation: 0.4s mrj_bd1_svg_overlay 1.5s linear forwards;
}
@keyframes mrj_bd1_svg_overlay  {
	100% { opacity: 1; 	}
}

/* при затваряне плавно скриване на overlay белия цвят */
.mrj-bd1 .bd1_features_icon.bd1_close .bd1_features_overlay {
	opacity: 1;
	animation: 0.4s mrj_bd1_svg_overlay_close linear forwards;
}
@keyframes mrj_bd1_svg_overlay_close  {
	100% { 	opacity: 0; }
}

.mrj-bd1 .bd1_features_icon:before,
.mrj-bd1 .bd1_features_icon:after {
	content: "";
	position: absolute;
	border-radius: 50%;
	z-index: -1;
}

/* цвят под иконата същот като bd1_features_overlay но с друг цвят */
.mrj-bd1 .bd1_features_icon:after {
	width: 110px;
	height: 110px;
	background: linear-gradient(45deg,#FA8C05 , #FFD414 70%);
	box-shadow: 0px 6px 10px 2px #00000061 inset;
}

/* пръстена около иконата */
.mrj-bd1 .bd1_features_icon:before {
	background: linear-gradient(45deg, #FFD414 , #FA8C05 70%);
	width: 145px;
	height: 145px;
	box-shadow: 0px 0px 15px #00000091;
}

/* облия пръстен, фона под иконата и белия цвят под иконата */
/************************************************************/


/*****************/
/* метален капак */
.bd1_features_overlay_metal {
	position: absolute;
	background: conic-gradient(#ccc 5%, #c8c8c8 10%, #dbdbdb 20%, #ccc 30%, #eaeaea 40%, #c4c4c4 50%, #d5d5d5 60%, #a8a8a8 70%, #b9b9b9 80%, #a4a4a4 90%, #c4c4c4 100%);
	width: 110px;
	height: 110px;
	border-radius: 50%;
	transition: 0.5s all;
	transform-origin: 0% 50%;
	z-index: 1;
}
/* отваряне на капака */
.mrj-bd1:not(.mrj-bd1--sun-ray) .bd1_features_icon.bd1_open .bd1_features_overlay_metal {
	animation:  1s bd1_features_metal_open  0.5s cubic-bezier(.68,-0.55,.27,1.55) forwards;
}

@keyframes bd1_features_metal_open {
	100% { transform: rotateZ(122deg) translateX(10px); }
}
/* затваряне на капака */
.mrj-bd1:not(.mrj-bd1--sun-ray) .bd1_features_icon.bd1_close .bd1_features_overlay_metal {
	transform: rotateZ(122deg) translateX(10px);
	animation: 1s bd1_features_metal_close 0.5s cubic-bezier(.68,-0.55,.27,1.55) forwards;
}
@keyframes bd1_features_metal_close {
	100% { transform: rotateZ(0deg) translateX(0px); }
}
/* метален капак */
/*****************/



/*******************************/
/* анимация на металния капак  */

/* preserve-3d за ефекта  sun-ray за да лети капака */
.mrj-bd1.mrj-bd1--sun-ray .bd1_features_icon {
	perspective: 1000px;
	perspective-origin: 50% 50%;
	transform-style: preserve-3d;
}

/* очертаване и запълване fill  */
.mrj-bd1.mrj-bd1--sun-ray .bd1_features_icon.bd1_open svg {
	animation: 1.5s bd1_svg_stroke 3.5s linear forwards, 0.4s bd1_svg_no_stroke_fill_color 5s linear forwards;	
}

/* бялото bd1_features_overlay да се покаже след като капака излети */
.mrj-bd1.mrj-bd1--sun-ray .bd1_features_icon.bd1_open .bd1_features_overlay {
	animation: 0.4s mrj_bd1_svg_overlay 5s linear forwards;
}

/* металния капак се завърта излизта и се скрива */
.mrj-bd1.mrj-bd1--sun-ray .bd1_features_icon.bd1_open .bd1_features_overlay_metal {
	transform-origin: 50% 50%;
	/*
	animation: 3s bd1_features_metal_rotate 0s cubic-bezier(.86,0,.07,1) forwards,
	 1.5s bd1_features_metal_fly 3s cubic-bezier(.86,0,.07,1) forwards,
	 1s bd1_features_metal_fly_hidden 4s linear forwards;
	 */
	 animation: 3s bd1_features_metal_rotate 0s cubic-bezier(.86,0,.07,1) forwards, 
	 1.5s bd1_features_metal_fly 3s cubic-bezier(.86,0,.07,1) forwards,
	 0.5s bd1_features_metal_fly_hidden 4s linear forwards;
}
@keyframes bd1_features_metal_rotate {
	100% { 
		box-shadow: 0 0 10px #22222285;
		transform: translateZ(124px) rotateZ(360deg); 
	}
}
@keyframes bd1_features_metal_fly {
	0% {transform: translateZ(124px) /*rotateZ(415deg); */ }
	100% { transform: translateZ(2024px) translateX(0px) translateY(70px) rotateY(-500deg); 	}
}
@keyframes bd1_features_metal_fly_hidden {
	100% { opacity: 0; }
}
/* затваряне на металния капак */
.mrj-bd1.mrj-bd1--sun-ray .bd1_features_icon.bd1_close .bd1_features_overlay_metal {
	transform-origin: 50% 50%;
	animation: 1.5s bd1_features_metal_fly_close 0s cubic-bezier(.65,.05,.36,1) forwards;
	animation: 1.5s bd1_features_metal_fly_close 0s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes bd1_features_metal_fly_close {
	0% { transform: translateZ(1192px) translateX(0px) translateY(50px) rotateY(-380deg); /*rotateZ(415deg); */ }
	100% { transform: translateZ(0px) translateX(0px) translateY(0px) rotateY(0); 	}
}
/* когато се затваря слънцето се скрива */
.mrj-bd1.mrj-bd1--sun-ray .bd1_features_icon.bd1_close .wi-sky-sun,
.mrj-bd1.mrj-bd1--sun-ray .bd1_features_icon.bd1_close .wi-sky-sun .wi-sky-sun-rays {
	opacity: 1;
	animation: 0.5s bd1_features_metal_fly_hidden 0.5s linear forwards;
}

/* анимация на металния капак  */
/*******************************/





/*****************************************************/
/* точките за отваряне и затваряне на металния капак */
.mrj-bd1:not(.mrj-bd1--sun-ray) .bd1_features-open-point,
.mrj-bd1:not(.mrj-bd1--sun-ray) .bd1_features_overlay_metal:after,
.mrj-bd1:not(.mrj-bd1--sun-ray) .bd1_features_overlay_metal:before {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	top: 48%;
	left: 95%;	
	background: conic-gradient(#ccc 5%, #c8c8c8 10%, #dbdbdb 20%, #ccc 30%, #eaeaea 40%, #c4c4c4 50%, #d5d5d5 60%, #a8a8a8 70%, #b9b9b9 80%, #a4a4a4 90%, #c4c4c4 100%);
	border-radius:50%;
}
.mrj-bd1:not(.mrj-bd1--sun-ray) .bd1_features_overlay_metal:before {
	top: -1%;
	left: 30%;
	background: conic-gradient(#ccc 5%, #c8c8c8 10%, #dbdbdb 20%, #ccc 30%, #eaeaea 40%, #c4c4c4 50%, #d5d5d5 60%, #a8a8a8 70%, #b9b9b9 80%, #a4a4a4 90%, #c4c4c4 100%);
}

/* точките */
.mrj-bd1:not(.mrj-bd1--sun-ray) .bd1_features-open-point {
	top: 57%;
	left: 128%;
	z-index:2;
	background: conic-gradient(#ddbc07 5%, #d7ca05 10%, #d2bc06 20%, #f2fa05 30%, #d0cd0d 40%, #f4fb15 50%, #d9d611 60%, #c6ba09 70%, #b9af1c 80%, #e3e012 90%, #c8ce0d 100%);
	box-shadow: 2px 2px 2px #0000004f, 2px 1px 2px #999706 inset;
	/*
	background: conic-gradient(#dd7d07 5%, #d77905 10%, #d27706 20%, #fa8c05 30%, #d0790d 40%, #fb9315 50%, #d97f11 60%, #c67109 70%, #b9721c 80%, #e38512 90%, #ce770d 100%);
	box-shadow: 1px 1px 2px #0000006b, 1px 1px 2px #b7721e inset;
	*/
}




/* отваряне жълтата точка */
.mrj-bd1:not(.mrj-bd1--sun-ray) .bd1_features_icon.bd1_open .bd1_features-open-point {
	animation:  1s bd1_features_point  0.5s cubic-bezier(.68,-0.55,.27,1.55) forwards;
}
@keyframes bd1_features_point {
	100% {
		left: 140%
	}
}
/* затваряне жълтата точка */
.mrj-bd1:not(.mrj-bd1--sun-ray) .bd1_features_icon.bd1_close .bd1_features-open-point {
	left: 140%;
	animation:  0.5s bd1_features_point_close  1s cubic-bezier(.68,-0.55,.27,1.55) forwards;
}
@keyframes bd1_features_point_close {
	100% {
		left: 128%
	}
}

/* точките за отваряне и затваряне на металния капак */
/*****************************************************/




/**********/
/* слънце */
.wi-sky-sun { 
	position: absolute;
	width: 70px;
	height: 70px;
	z-index: 0;
	transition: 0.3s all;
	opacity: 0;
}
.mrj-bd1.mrj-bd1--sun-ray.mrj-animation-start .wi-sky-sun {
	animation: 0.7s mrj_bd1_sun_ray_show 1.3s linear  forwards;
}
@keyframes mrj_bd1_sun_ray_show {
	100% { opacity: 1; }
}
.wi-sky-sun:before {
	content: "";
	width: 70px;
	height: 70px;
	display: block;	
	border-radius: 50%;
	background: #fff6d4;
	opacity: 0.9;
	box-shadow: 0px 0px 40px 15px #fff6d4;
	transition: 0.3s all;
	opacity: 0;
}
.wi-sky-sun-rays {
	position: absolute;
	margin: auto;
	top:0px;
	left:0;
	right:0;
	bottom:0;	
	width:70px;  
	animation: ray_anim 40s linear infinite;
	pointer-events: none;
}
.wi-sky-sun-rays div {  
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
	background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); 
	margin-left:10px;
	border-radius:80% 80% 0 0;
	position:absolute;
	opacity: 0.3;
}
.wi-sky-sun-rays div:nth-of-type(1) {
	height:170px;
	width:30px;
	transform: rotate(180deg);
	top:-175px;
	left: 15px;
}

.wi-sky-sun-rays div:nth-of-type(2)  {
	height:100px;
	width:8px;
	transform: rotate(220deg);
	top:-90px;
	left: 75px;
}
.wi-sky-sun-rays div:nth-of-type(3)  {
	height:170px;
	width:50px;
	transform: rotate(250deg);
	top:-80px;
	left: 100px;
}
.wi-sky-sun-rays div:nth-of-type(4)  {
	height:120px;
	width:14px;
	transform: rotate(305deg);
	top:30px;
	left: 100px;
}
.wi-sky-sun-rays div:nth-of-type(5)  {
	height:140px;
	width:30px;
	transform: rotate(-15deg);
	top:60px;
	left: 40px;
}
.wi-sky-sun-rays div:nth-of-type(6){
	height:90px;
	width:50px;
	transform: rotate(30deg);
	top:60px;
	left: -40px;
}
.wi-sky-sun-rays div:nth-of-type(7){
	height:180px;
	width:10px;
	transform: rotate(70deg);
	top:-35px;
	left: -40px;
}
.wi-sky-sun-rays div:nth-of-type(8){
	height:120px;
	width:30px;
	transform: rotate(100deg);
	top:-45px;
	left:-90px;
}
.wi-sky-sun-rays div:nth-of-type(9){
	height:80px;
	width:10px;
	transform: rotate(120deg);
	top:-65px;
	left:-60px;
}
.wi-sky-sun-rays div:nth-of-type(10){
	height:190px;
	width:23px;
	transform: rotate(150deg);
	top:-185px;
	left: -60px;
}
@keyframes ray_anim { 
	0% { transform: rotate(0deg); transform: rotate(0deg);}    
    100% { transform: rotate(360deg); transform: rotate(360deg);}
}
/* слънце */
/**********/








/*************/
/* ЗАГЛАВИЕ */

.bd1_title {
	position: relative;
	display: flex;
	flex-direction: column;	
	gap: 5px 0px;
	padding-bottom: 5px;
}
/* текста на заглавието */
.bd1_title .title-text {
	font-size: 26px;
	text-align: center;
	font-family: roboto condensed;
	color: #df7b00;
	padding: 0 5px;
	font-weight: 400;
	margin: 0;
}

/***************/
/* подзаглавие */
.bd1-subtitle-wrap {
	position: relative;
	display: grid;
	place-items: center;
	height: 26px;	
}
.bd1-subtitle {
	position: absolute;
	align-self: center;	
	font-size: 15px;
	font-weight: normal;
	color: #fff;
	padding: 0 10px 2px 10px;
	border-radius: 8px;
	background: #fb9407;	
	--animate-duration: 1.5s;
	--animate-delay: 1.8s;
}
/* триъгълната стрелка */
.bd1_title .bd1-subtitle:after {
	content: "";
	position: absolute;
	border-style: solid;
	border-width: 7px 10px 10px 10px;
	border-color: #fb9407 #fff0 #fff0 #fff0;
	background: transparent;
	left: calc(50% - 10px);
	top: 100%;
}
/* подзаглавие */
/***************/


/******************************************/
/* сепаратор черта и икона под заглавието */
.title-sep-icon-wrap {
	position: relative;
	display: grid;
	place-items: center;
}
.title-sep-icon-wrap::after,
.title-sep-icon-wrap::before {
	content: "";
	position: absolute;
}

/* бяла точка зад чертичките after на звездата */
.title-sep-icon-wrap::before {
	background: #ffbaba;
	background: #fff;
	width: 28px;
	height: 28px;
	left: calc(50%);
	transform: translate(-50%, 0);
	border-radius: 50%;
	z-index: 1;
}
.title-sep-icon-wrap::after {
	width:100%;
	height: 1px;
	background: linear-gradient(90deg,#FFF, #b3b3b3 50%, white );
}
/* икона в центъра на чертите на заглавието */
.bd1_title_svg_separator {
	position: relative;
	width: 15px;
	height: 19px;	
	z-index: 22;
	fill: #fa8c05;
	border-radius: 50%;
} 

/* ако има scroll-effect иконата е в страни */
/* при бързата анимация се маха аниамцията за да не е досадно */
.mrj-bd1:not(.mrj-bd1--fast-animation).mrj-scroll-effect .bd1_title_svg_separator {
	left: -50%;
	transform: translate(-50%, 0);
} 
/* анимация на иконата */
/* при бързата анимация се маха аниамцията за да не е досадно */
.mrj-bd1:not(.mrj-bd1--fast-animation).mrj-scroll-effect.mrj-animation-start .bd1_title_svg_separator {
	animation: 3s bd1_title_svg_separator 4s cubic-bezier(.68,-0.55,.27,1.55) forwards;
} 

@keyframes bd1_title_svg_separator {
	100% {
		left: 0;
		transform: translate(0, 0) rotateZ(720deg);
	}
}
/* сепаратор черта и икона под заглавието */
/******************************************/



/**************************/
/* subtitle span анимация */

/*  анимацията е спряна когато има enable-scroll-effect а няма animation-start */
/* спира изпълнението на animate__animated  */
.mrj-bd1.mrj-scroll-effect:not(.mrj-animation-start) .bd1_title .bd1-subtitle {
	visibility: hidden;
	animation: none !important;
}

/* показване на елемента при стартиране на анимацията */
.mrj-bd1.mrj-scroll-effect.mrj-animation-start .bd1_title .bd1-subtitle {
	visibility: visible;
}

/* по-бърза анимация за да не е досадно */
.mrj-bd1.mrj-bd1--fast-animation .bd1_title .bd1-subtitle {
	--animate-delay: 0.2s;
}

/* поредния номер на subtitle за да се изчислява анимацията */
.mrj-bd1.mrj-bd1--sun-ray  .bd1-subtitle-wrap .bd1-subtitle:nth-child(1) { --i: 0; }
.mrj-bd1.mrj-bd1--sun-ray  .bd1-subtitle-wrap .bd1-subtitle:nth-child(2) { --i: 1; }
.mrj-bd1.mrj-bd1--sun-ray  .bd1-subtitle-wrap .bd1-subtitle:nth-child(3) { --i: 2; }
.mrj-bd1.mrj-bd1--sun-ray  .bd1-subtitle-wrap .bd1-subtitle:nth-child(4) { --i: 3; }
.mrj-bd1.mrj-bd1--sun-ray  .bd1-subtitle-wrap .bd1-subtitle:nth-child(5) { --i: 4; }
.mrj-bd1.mrj-bd1--sun-ray  .bd1-subtitle-wrap .bd1-subtitle:nth-child(6) { --i: 5; }
.mrj-bd1.mrj-bd1--sun-ray  .bd1-subtitle-wrap .bd1-subtitle:nth-child(7) { --i: 6; }
.mrj-bd1.mrj-bd1--sun-ray  .bd1-subtitle-wrap .bd1-subtitle:nth-child(8) { --i: 7; }
.mrj-bd1.mrj-bd1--sun-ray  .bd1-subtitle-wrap .bd1-subtitle:nth-child(9) { --i: 8; }


/* анимацията на първия subtitle пада отгоре  */
.mrj-bd1.mrj-bd1--sun-ray.mrj-scroll-effect.mrj-animation-start .bd1-subtitle-wrap .bd1-subtitle:first-child {
	transform: translate3d(0,-3000px,0);
	animation: 1.5s bounceInDown 5s cubic-bezier(.215,.61,.355,1) forwards,
	3s bd1_features_ray_out_horisontal 8s cubic-bezier(.215,.61,.355,1) forwards;
}
/* анимация subtitle без първия и последния */
/* елементите които се блъскат и преместват на ляво */
.mrj-bd1.mrj-bd1--sun-ray.mrj-scroll-effect.mrj-animation-start .bd1-subtitle-wrap .bd1-subtitle:not(:first-child):not(:last-child) {
	transform: translate3d(3000px,0,0);
	animation: 3s bd1_features_ray_in_horisontal calc(4.5s + var(--i) * 3s) cubic-bezier(.215,.61,.355,1) forwards,
	3s bd1_features_ray_out_horisontal calc(8s + var(--i) * 3s) cubic-bezier(.215,.61,.355,1) forwards;
}
/* анимация на последния елемент появява се не изчезва */
.mrj-bd1.mrj-bd1--sun-ray.mrj-scroll-effect.mrj-animation-start .bd1-subtitle-wrap .bd1-subtitle:not(:first-child):last-child {
	transform: translate3d(3000px,0,0);
	animation: 3s bd1_features_ray_in_horisontal calc(4.5s + var(--i) * 3s) cubic-bezier(.215,.61,.355,1) forwards;
}

@keyframes bd1_features_ray_in_horisontal {
	20% {
		opacity: 0.9;
		transform: translate3d(50%,0,0) scale3d(0.8,1,1);
	}
	100% {
		opacity: 1;
		transform: translate3d(0,0,0) scaleX(1);
	 }
}

@keyframes bd1_features_ray_out_horisontal {
	20% {
		opacity: 0.9;
		transform: translate3d(-50%,0,0) scale3d(0.8,1,1);
	}
	100% {
		opacity: 0;
		transform: translate3d(-2000px,0,0) scaleX(2); 	
	 }
}

/* subtitle span анимация */
/**************************/


/* ЗАГЛАВИЕ */
/*************/




/* описание с ui li */
.bd1_description {
	/* font-size: 15px; */
	font-size: 1rem;
	padding: 0px 10px;
	max-height: 400px;
	overflow-y: auto;
}

.bd1_description ul {
	padding: 0;
	margin: 0;
}
.bd1_description ul li {
	list-style: none;
}
.bd1_description ul li:nth-child(2n-1) {
	background: #eaeaea5e;
}


/* list icons */
.list-icon {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.list-icon li {
	display: grid;
	grid-template-columns: auto 1fr; 
	column-gap: 10px;  
}

.list-icon .icon {
	display: flex;
	align-items: center;
	justify-content: center;	
	width: 1.2em;
	height: 1.2em;
	/* леко подравняване с текста */
	margin-top: 0.2em;
	color: var(--list-icon-color);
}

.list-icon .icon svg {
	width: 100%;
	height: 100%;
	display: block;
	color: currentColor;
}

.list-icon .text {
	display: block;
	line-height: 1.4;
}







/*

стария варитна без svg а със svg background за ul li

ul.bd1_description-no li:before,
ul.bd1_description-yes li:before 
{
	content: "";
	position: absolute;
	left: 0px;
	top: 9px;
	width: 12px;
	height: 15px;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="%23c60025" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>') no-repeat;
}
ul.bd1_description-yes li:before {
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%2306aa46" d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>') no-repeat;	
}
*/


/* промяна само за тест фонт авесон font sweson 

.bd1_description  ul.FontAwesome li {
	padding: 4px 4px 4px 25px;
}
.bd1_description  ul.FontAwesome li:before {
	font-family: "FontAwesome";
	font-size: 20px;
	position: absolute;
	left: 0px;
	color: #ac3e53;
	content: var(--icons);	
}*/


/************************/
/* задаване на цветове */

/* orange по подразбиране и без това са си такива */

.mrj-bd1--orange {
--gradient-1: #FA8C05;
--gradient-2: #FFD414 ;
--gradient-1-0: rgb(250, 140, 5, 0.3);
--gradient-2-0: rgb(255, 212, 20, 0.3);
--title-color: #df7b00;
--title-span-color: #fb9407;
/* --stroke: #845801; */ /* промяна */
--fill-icon: #fa8c05;
--list-icon-color: var(--fill-icon);
--text-accent-bg: #fff7df;
--text-accent-color: #bd6e00;
}

.mrj-bd1--pink {
--gradient-1: #fa5ca6;
--gradient-2: #ff2e7b;
--gradient-1-0: rgb(250, 92, 166, 0.3);
--gradient-2-0: rgb(255, 46, 123, 0.3);
--title-color: #ff2e7b;
--title-span-color: #ff5694;
/* --stroke: #9b053d; */ /* промяна */
--fill-icon: #ff2e7b;
--list-icon-color: var(--fill-icon);
--text-accent-bg: #fff1f6;
--text-accent-color:  #ff2e7b;
}

.mrj-bd1--dgreen {
--gradient-1: #017089;
--gradient-2: #38a894;
--gradient-1-0: rgb(1, 112, 137, 0.3);
--gradient-2-0: rgb(56, 168, 148, 0.3);
--title-color: #ff2e7b;
--title-span-color: #ff5694;
/* --stroke: #9b053d;  */ /* промяна */
--fill-icon: #ff2e7b;
--gradient-1: #00a0c4;
--gradient-2: #00bb9a;
--title-color: #007d99;
--title-span-color: #00a0c4;
/* --stroke: #00576a;  */ /* промяна */
--fill-icon: #00a0c4;
--list-icon-color: var(--fill-icon);
--text-accent-bg: #ddf7fb;
--text-accent-color: #0284a2;
}

.mrj-bd1--green {
--gradient-1: #00c4a8;
--gradient-2: #009f91;
--gradient-1-0: rgb(1, 112, 137, 0.3);
--gradient-2-0: rgb(56, 168, 148, 0.3);
--title-color: #048277;
--title-span-color: #009f91;
/* --stroke: #005951; */ /* промяна */
--fill-icon: #009f91;
--list-icon-color: var(--fill-icon);
--text-accent-bg: #ddf7fb;
--text-accent-color: var(--fill-icon);
}

.mrj-bd1--purple-1 {
--gradient-1: #da43f0;	
--gradient-2: #7d35e8;
--gradient-1-0: rgb(218, 67, 240, 0.3);	
--gradient-2-0: rgb(125, 53, 232, 0.3);
--gradient-icon-1: #ff51dc;	
--gradient-icon-2: #7d36e8;
--title-color: #b40bcc;
--title-span-color: #da43f0;
/* --stroke: #1e004b; */ /* промяна */
--fill-icon: #b40bcc;
--list-icon-color: var(--fill-icon);
--text-accent-bg: #fcf1ff;
--text-accent-color: #a92ec8;
} 

.mrj-bd1--blue-1 {
--gradient-1: #1da3e6;
--gradient-2: #3174f2;
--gradient-1-0: rgb(29, 163, 230, 0.3);
--gradient-2-0: rgb(49, 116, 242, 0.3);
--title-color: #0681bf;
--title-span-color: #0291d9;
/* --stroke: #003184; */ /* промяна */
--fill-icon: #0291d9;
--list-icon-color: var(--fill-icon);
--text-accent-bg: #ebf8ff;
--text-accent-color: #217cb7;
}

.mrj-bd1--dblue {
--gradient-1: #13c2f7;
--gradient-2: #0c1859;
--gradient-1-0: rgb(250, 92, 166, 0.3);
--gradient-2-0: rgba(46, 235, 255, 0.3);
--title-color: #0c87ac;
--title-span-color: #08a8d9;
/* --stroke: #0c1859; */ /* промяна */
--fill-icon: #08a8d9;
--list-icon-color: var(--fill-icon);
--text-accent-bg: #ddf7fb;
--text-accent-color: #0689b1;
}

.bd1_description .accent {
	background: var(--text-accent-bg);
	color: var(--text-accent-color);
	padding: 5px 10px;
	border-radius: 8px;
	display: block;
}

.mrj-bd1:before {
	background: conic-gradient(var(--gradient-2) 25deg, var(--gradient-1) 30deg , var(--gradient-2) 50deg, var(--gradient-1) 70deg,var(--gradient-2) 100deg, var(--gradient-1) 120deg , var(--gradient-2) 140deg, var(--gradient-1) 160deg, var(--gradient-2) 180deg, var(--gradient-1) 200deg, var(--gradient-2) 220deg, var(--gradient-1) 240deg, var(--gradient-2) 260deg, var(--gradient-1) 280deg, var(--gradient-2) 300deg, var(--gradient-1) 320deg, var(--gradient-2) 360deg);
}

.mrj-bd1 .bd1_features::before {
	background: linear-gradient(135deg, var(--gradient-2), var(--gradient-1) 93%);
}
.mrj-bd1 .bd1_features::after {
	background: linear-gradient(45deg, var(--gradient-1), var(--gradient-2) 70%);
}
.mrj-bd1 .bd1_features_icon::before {
    background: linear-gradient(45deg, var(--gradient-2), var(--gradient-1) 70%);
}
/* изключение за purple-1 */
.mrj-bd1.mrj-bd1--purple-1 .bd1_features_icon::before {
    background: linear-gradient(45deg, var(--gradient-icon-2), var(--gradient-icon-1) 70%);
}
.mrj-bd1 .bd1_features_icon::after {
	 background: linear-gradient(45deg, var(--gradient-1), var(--gradient-2) 70%);
}
/* изключение за purple-1 */
.mrj-bd1--purple-1 .bd1_features_icon::after {
	 background: linear-gradient(45deg, var(--gradient-icon-1), var(--gradient-icon-2) 70%);
}
.mrj-bd1 .bd1_features_icon svg {
	stroke: var(--stroke);
}
.mrj-bd1 .bd1_features_icon.bd1_open svg {
	animation: 2s bd1_svg_stroke 1.5s linear forwards, 0.4s bd1_svg_no_stroke_fill_color 3.5s linear forwards;	
}

.mrj-bd1 .bd1_title .title-text {
	color: var(--title-color);
}
.mrj-bd1 .bd1_title .bd1-subtitle {
	background:var(--title-span-color);
}
.mrj-bd1 .bd1_title .bd1-subtitle::after {
	border-color: var(--title-span-color) #fff0 #fff0 #fff0;	
}
.mrj-bd1 .bd1_title .title-text {
	color: var(--title-color);
}
.mrj-bd1 .bd1_title .bd1_title_svg_separator {
	fill: var(--fill-icon);
	color: var(--fill-icon);
}


/*  цветове за чертите и запълването */
@keyframes bd1_svg_stroke {
	0% { stroke-dashoffset: var(--stroke-dasharray); 	}
	100% { stroke-dashoffset: 0; 	}
}
@keyframes bd1_svg_no_stroke_fill_color {
	100% {
		fill: var(--fill-icon);
		color: var(--fill-icon);
		stroke-width: 0;	
	}
}

/* цветове на скрола */
/* mozilla */
@supports not selector(::-webkit-scrollbar)  {
	.bd1_description {
		scrollbar-color: #fb9d09 #fddfac;
		scrollbar-color: var(--gradient-1) var(--gradient-2-0);
		scrollbar-width: thin;
	}
	/* dblue изключение */
	.mrj-bd1--dblue .bd1_description {
		scrollbar-color: var(--fill-icon) var(--gradient-2-0);
	}
}
/* chrome */
.bd1_description::-webkit-scrollbar {
	width: 8px;
}
.bd1_description::-webkit-scrollbar-track {
	background-color: #dfdddd;
	border: 1px solid #c7c7c7;
	border-radius: 5px;
	box-shadow: 1px 1px 3px #bbbbbb inset, 4px 0px 3px #ffffff47 inset;
}
.bd1_description::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background: linear-gradient(90deg, #00000000 20%, #ffffff45 50%, #ffffff00 60%),
	repeating-linear-gradient(135deg, var(--gradient-1) 0 2em, var(--gradient-2) 0 4em);
}
.mrj-bd1--pink .bd1_description::-webkit-scrollbar-thumb {
	background: linear-gradient(90deg, #00000000 20%, #ffffff45 50%, #ffffff00 60%), repeating-linear-gradient(135deg, var(--gradient-2) 0 2em, #fff 0 4em);
	box-shadow: 2px 0px 4px #4c4c4c6e inset;
}

.mrj-bd1--dblue .bd1_description::-webkit-scrollbar-thumb {
	background: linear-gradient(90deg, #00000000 20%, #ffffff45 50%, #ffffff00 60%), repeating-linear-gradient(135deg, #029ecd 0 2em, #fff 0 4em);
	box-shadow: 2px 0px 4px #4c4c4c6e inset;
	
}
/* задаваен на цветове */
/***********************/

/* спира анимациите */
@media (prefers-reduced-motion: reduce) {
  .mrj-bd1 * {
    animation: none !important;
    transition: none !important;
  }
}

