.frame-wrap{
	display: block; width: 100%; height: 100%; overflow: auto;
	position: fixed; top: 0; left: 0; z-index: 998;
	background: #fff;
	padding: 56px 0 88px 0;
}
#bi-iframe-load .frame-wrap{ position: absolute; overflow: hidden; }
.frame-wrap .top-bar{
	position: fixed; top: 0; left: 0; z-index: 998;
	background: #E3ECFF; padding: 16px 24px;
	width: 100%;
}
.frame-wrap .bottom-bar{
	position: fixed; bottom: 0; left: 0; z-index: 998;
	background: #fff; padding: 0;
	width: 100%; height: 88px;
}
#bi-iframe-load .frame-wrap .top-bar{ position: absolute; }
#bi-iframe-load .frame-wrap .bottom-bar{ position: absolute; }
.frame-wrap .top-bar .btn-icon{
	display: block; float: left; height: 24px;
	font-family: var(--f-title); font-weight: 700;
	font-size: 16px; line-height: 24px;
	cursor: pointer; text-transform: uppercase;
	color: var(--bg-blue); font-weight: 800;
	overflow: hidden;
}
.frame-wrap .top-bar .btn-icon:before{
	content: ''; display: inline-block; width: 24px; height: 24px;
	vertical-align: middle; margin-right: 16px;
	background-position: center center;
	background-repeat: no-repeat;
	color: var(--bg-blue); font-weight: 800;
}
.frame-wrap .top-bar .btn-icon.btn-back:before{
	background-image: url(../images/icons/back.svg);
	background-size: 16px 15px;
}
.frame-wrap .top-bar .btn-icon.btn-close{ 
	float: right; width: 24px;
}
.frame-wrap .top-bar .btn-icon.btn-close:before{
	background-image: url(../images/icons/close.svg);
	background-size: 16px 15px;
	margin-right: 0;
} 
.frame-wrap .top-bar .btn-icon.btn-back.disabled{ opacity: 0.3; }
.frame-wrap .frame{
	display: block; width: 100%; 
	position: relative; z-index: 0;
	text-align: center; padding: 24px;
    vertical-align: middle;
    max-width: 1200px; margin: 0 auto;
    
    -webkit-transition: top 200ms ease-in-out;
	-moz-transition: top 200ms ease-in-out;
	-ms-transition: top 200ms ease-in-out;
	-o-transition: top 200ms ease-in-out;
	transition: top 200ms ease-in-out;
}
.frame-wrap .frame .main{ padding: 0!important; }
#bi-iframe-load .frame-wrap .frame{ max-height: 100%; height: auto; overflow: auto; max-width: 100%; }

/*
.frame-wrap .frame{
	position: relative; top: 50%; left: 50%; margin: 0;
	-moz-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}*/
.frame-wrap .frame:after{ content: ''; display: block; clear: both; }
.frame-wrap .frame div.content{  max-width: 824px; display: block; margin: 0 auto; }

.frame-wrap .bottom-bar .slider{
	display: block; width: 50%; height: 20px;
	position: absolute; top: 62px; left: 50%;
	background: #F6D9D1; border-radius: 10px;
	
	-moz-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	
	-webkit-transition: background 200ms ease-in-out;
	-moz-transition: background 200ms ease-in-out;
	-ms-transition: background 200ms ease-in-out;
	-o-transition: background 200ms ease-in-out;
	transition: background 200ms ease-in-out;
}
.frame-wrap .bottom-bar .slider .point{
	display: block; height: 32px; width: 32px;
	position: absolute; top: -44px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	overflow: hidden; text-indent: -999px;
	opacity: 0;
	
	-webkit-transition: opacity 200ms ease-in-out;
	-moz-transition: opacity 200ms ease-in-out;
	-ms-transition: opacity 200ms ease-in-out;
	-o-transition: opacity 200ms ease-in-out;
	transition: opacity 200ms ease-in-out;
}
.frame-wrap .bottom-bar .slider .point.point1{
	left: 0; margin-left: -6px;
	background-image: url(../images/icons/p1.svg);
}
.frame-wrap .bottom-bar .slider .point.point2{
	left: 25%; margin-left: -16px;
	background-image: url(../images/icons/p2.svg);
}
.frame-wrap .bottom-bar .slider .point.point3{
	left: 50%; margin-left: -24px;
	background-image: url(../images/icons/p3.svg);
}
.frame-wrap .bottom-bar .slider .point.point4{
	right: 25%; margin-right: -16px;
	background-image: url(../images/icons/p4.svg);
}
.frame-wrap .bottom-bar .slider .point.point5{
	right: 0; margin-right: -6px;
	background-image: url(../images/icons/p5.svg);
}
.frame-wrap .bottom-bar .slider .progress{
	display: block; float: left; width: 0; height: 20px;
	border-radius: 10px;
	
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;
	-ms-transition: all 400ms ease-in-out;
	-o-transition: all 400ms ease-in-out;
	transition: all 400ms ease-in-out;
}
.frame-wrap .bottom-bar .slider.p1{ background: rgba(242,88,64,0.5); }
.frame-wrap .bottom-bar .slider.p1 .progress{ width: 10%; background: #F25840; } 
.frame-wrap .bottom-bar .slider.p1 .point.point1{ opacity: 1; }
.frame-wrap .bottom-bar .slider.p2{ background: rgba(242,126,64,0.5); }
.frame-wrap .bottom-bar .slider.p2 .progress{ width: 25%; background: #F27E40; } 
.frame-wrap .bottom-bar .slider.p2 .point.point1{ opacity: 1; }
.frame-wrap .bottom-bar .slider.p2 .point.point2{ opacity: 1; }
.frame-wrap .bottom-bar .slider.p3{ background: rgba(251,175,29,0.5); }
.frame-wrap .bottom-bar .slider.p3 .progress{ width: 50%; background: #FBAF1D; } 
.frame-wrap .bottom-bar .slider.p3 .point.point1{ opacity: 1; }
.frame-wrap .bottom-bar .slider.p3 .point.point2{ opacity: 1; }
.frame-wrap .bottom-bar .slider.p3 .point.point3{ opacity: 1; }
.frame-wrap .bottom-bar .slider.p4{ background: rgba(242,215,64,0.5); }
.frame-wrap .bottom-bar .slider.p4 .progress{ width: 75%; background: #F2D740; } 
.frame-wrap .bottom-bar .slider.p4 .point.point1{ opacity: 1; }
.frame-wrap .bottom-bar .slider.p4 .point.point2{ opacity: 1; }
.frame-wrap .bottom-bar .slider.p4 .point.point3{ opacity: 1; }
.frame-wrap .bottom-bar .slider.p4 .point.point4{ opacity: 1; }
.frame-wrap .bottom-bar .slider.p5{ background: rgba(22,230,159,0.5); }
.frame-wrap .bottom-bar .slider.p5 .progress{ width: 100%; background: #16E69F; }  
.frame-wrap .bottom-bar .slider.p5 .point.point1{ opacity: 1; }
.frame-wrap .bottom-bar .slider.p5 .point.point2{ opacity: 1; }
.frame-wrap .bottom-bar .slider.p5 .point.point3{ opacity: 1; }
.frame-wrap .bottom-bar .slider.p5 .point.point4{ opacity: 1; }
.frame-wrap .bottom-bar .slider.p5 .point.point5{ opacity: 1; }

.frame-wrap .bottom-bar > span{ 
	display: block; 
	font-size: 16px; line-height: 20px;
	text-transform: uppercase;
	position: absolute; top: 52px;
	color: var(--bg-blue); font-weight: 600; 
}
.frame-wrap .bottom-bar > span:first-child{ right: 75%; margin-right: 24px; }
.frame-wrap .bottom-bar > span:last-child{ left: 75%; margin-left: 24px; }

.frame-wrap h2.title{ color: var(--bg-blue); font-size: 28px; line-height: normal; margin: 0; }
.frame-wrap p.subtitle{ 
	color: var(--bg-blue); font-size: 18px; line-height: normal; margin: 16px 0 40px 0; 
	text-transform: uppercase; font-weight: 600;
}

.frame-wrap .btn-frame{
	display: block; float: left; padding: 24px;
	border-radius: 12px;
	border: 1px solid var(--c-purple);
	cursor: pointer; color: var(--bg-blue);
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;
	-ms-transition: all 400ms ease-in-out;
	-o-transition: all 400ms ease-in-out;
	transition: all 400ms ease-in-out;
}
.frame-wrap .btn-frame:hover{ background: #CBDCFF;  border-color: #CBDCFF; }
.frame-wrap .btn-frame svg *{
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;
	-ms-transition: all 400ms ease-in-out;
	-o-transition: all 400ms ease-in-out;
	transition: all 400ms ease-in-out;
}
.frame-wrap .btn-frame.btn-frame-bulgaria:hover svg g path{ fill: #fff; }
.frame-wrap .btn-frame.btn-frame-world:hover svg g g path{ fill: #fff; }

.frame-wrap .btn-frame h3{ font-size: 18px; line-height: 24px; margin: 0; }
.frame-wrap .btn-frame p{ font-size: 12px; line-height: normal; margin: 4px 0; padding: 6px 0; }

.frame-wrap .btn-frame .label{
	display: block; position: absolute; top: 0; right: 0; z-index: 2; width: auto; 
	background: var(--c-green); color: var(--bg-blue); text-transform: uppercase;
	font-size: 11px; line-height: 18px; font-weight: 700; 
	padding: 0 12px; margin: 0;
	border-top-right-radius: 12px;
}

.frame-wrap .btn-frame .img{
	display: block; margin: 0 auto; margin-bottom: 16px;
	width: 64px; height: 64px;
}
.frame-wrap .btn-frame .img svg{ width: 100%; height: 100%; }
.frame-wrap .btn-frame.btn-frame-simple{
	width: calc(50% - 8px); padding: 0; height: 130px; position: relative;
}
.frame-wrap .btn-frame.btn-frame-simple p{
	font-size: 18px; line-height: normal; padding: 0;
}
.frame-wrap .btn-frame.btn-frame-simple h3{
	font-size: 22px; line-height: normal;
	font-family: var(--f-main); font-weight: 500; 
}
.frame-wrap .btn-frame.btn-frame-simple .info{ 
	position: absolute; top: 50%; left: 0;  width: 100%;
	padding: 0 24px;
	-moz-transform: translate(0,-50%);
	-webkit-transform: translate(0,-50%);
	-o-transform: translate(0,-50%);
	-ms-transform: translate(0,-50%);
	transform: translate(0,-50%);
}
.frame-wrap .btn-frame.btn-frame-simple:nth-of-type(2n+1){ clear: both; }
.frame-wrap .btn-frame.btn-frame-simple:nth-of-type(2n){ float: right; }

.frame-wrap .frame-1{ }
.frame-wrap .frame-1 h2.title{ margin-bottom: 40px; }
.frame-wrap .frame-1 .btn-frame{ width: calc(50% - 8px); padding-top: 54px; padding-bottom: 46px; }
.frame-wrap .frame-1 .btn-frame:nth-of-type(2n){ float: right; }


.frame-wrap .frame-2{ }
.frame-wrap .frame-2 .btn-frame{ 
	position: relative; width: calc((100% - 48px) / 3); height: 130px;
	margin: 8px 12px; padding: 0;
	text-align: left;
}
.frame-wrap .frame-2 .btn-frame:nth-of-type(3n+1){ clear: both; margin-left: 0; }
.frame-wrap .frame-2 .btn-frame:nth-of-type(3n){ margin-right: 0; }
.frame-wrap .frame-2 .btn-frame .img{
	position: absolute; top: 50%; left: 24px;
	width: 40px; height: 36px;
	margin-top: -18px;
}
.frame-wrap .frame-2 .btn-frame .img img{ width: auto; max-width: 100%; display: block; }
.frame-wrap .frame-2 .btn-frame h3{
	font-size: 24px; line-height: normal;
	font-family: var(--f-main); font-weight: 500; 
}
.frame-wrap .frame-2 .btn-frame p{
	font-size: 18px; line-height: normal; padding: 0;
}
.frame-wrap .frame-2 .btn-frame .info{
	display: block; position: absolute; top: 50%; left: 0; 
	padding: 0 24px 0 72px; margin: 0;
	-moz-transform: translate(0,-50%);
	-webkit-transform: translate(0,-50%);
	-o-transform: translate(0,-50%);
	-ms-transform: translate(0,-50%);
	transform: translate(0,-50%);
}

.frame-wrap .frame-3{  }

.frame-wrap .frame-4{  }

.frame-wrap .product-info{
	display: block; float: left; padding: 24px;
	width: calc(50% - 8px); min-height: 435px;
	position: relative; padding-bottom: 88px;
	border-radius: 12px;
	border: 1px solid var(--c-purple);
	cursor: pointer; color: var(--bg-blue);
	text-align: left;
	font-size: 12px; line-height: 16px;
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;
	-ms-transition: all 400ms ease-in-out;
	-o-transition: all 400ms ease-in-out;
	transition: all 400ms ease-in-out;
}
.frame-wrap .item-only .product-info{
	float: none; margin-left: auto; margin-right: auto;
}
.frame-wrap .product-info:nth-of-type(2n+1){ clear: both; }
.frame-wrap .product-info:nth-of-type(2n){ float: right; }
.frame-wrap .product-info .img{ display: block; width: 54px; margin: 0 auto; margin-bottom: 24px; }
.frame-wrap .product-info .img img{ display: block; width: auto; max-width: 100%; margin: 0 auto; height: 28px; }
.frame-wrap .product-info a{
	display: block; float: left;
	position: absolute; bottom: 24px; left: 50%; 
	-moz-transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	-o-transform: translate(-50%,0);
	-ms-transform: translate(-50%,0);
	transform: translate(-50%,0);
}
.frame-wrap .product-info h3{
	font-size: 18px; line-height: 24px;
	text-transform: uppercase; margin: 0; font-weight: 700;
	text-align: center;
}
.frame-wrap .product-info p.t{ 
	text-transform: uppercase; font-weight: 600; 
	position: relative; padding-left: 20px;
	margin: 16px 0 8px 0;
}
.frame-wrap .product-info p.t:before{
	content: ''; display: block; width: 16px; height: 16px;
	border-radius: 4px; background: var(--c-purple);
	position: absolute; top: 0px; left: 0;
	background: #16E69F url(../images/icons/check.svg) center center no-repeat;
}
.frame-wrap .product-info p.s{ 
	margin: 4px 0; padding: 4px 0;
	text-transform: uppercase;
	border-bottom: 2px solid rgba(0,0,0,0.1); padding-bottom: 16px;
	text-align: center;
}
.frame-wrap .product-info ul{
	margin: 0; 
}
.frame-wrap .product-info ul.options{ 
	display: block; margin: 20px 0 24px 0; list-style-type: none; padding: 0;  
}
.frame-wrap .product-info ul.options li{
	margin: 8px 0; display: block; position: relative;
	padding-left: 20px; text-align: left;
	font-size: 14px; line-height: 24px;
}
.frame-wrap .product-info ul.options li:before{
	content: ''; display: block; width: 16px; height: 16px;
	border-radius: 4px; background: var(--c-purple);
	position: absolute; top: 4px; left: 0;
}
.frame-wrap .product-info ul.options li.enable:before{
	background: #16E69F url(../images/icons/check.svg) center center no-repeat;
}

.frame-wrap .product-info ul.options li.disable:before{
	background: #E61616;
	content: 'x'; font-size: 12px; overflow: hidden; text-indent: 1px;
	text-transform: uppercase; line-height: 16px;
	text-align: center; color: #fff; font-weight: 600;
}


.frame-wrap .loader{
	display: block; width: 100%; height: 100%;
	position: absolute; top: 0; left: 0; z-index: 1;
	background: rgba(255,255,255,0.8); 
}
/*.frame-wrap .frame{ display: none; }*/
 
/* loader */
.pl {
	display: block;
	width: 80px;
	height: 80px;
	position: absolute; top: 50%; left: 50%;
	margin-top: -40px; margin-left: -40px;
} 
.pl__ring-rotate,
.pl__ring-stroke{
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
} 
.pl__ring-rotate,
.pl__ring-stroke {
	transform-origin: 80px 80px;
}
.pl__ring-rotate {
	animation-name: ringRotate;
}
.pl__ring-stroke {
	animation-name: ringStroke;
	transform: rotate(-45deg);
}  

/* Animations */
 
@keyframes ringRotate {
	from {
		transform: rotate(0); 
	}
	to {
		transform: rotate(720deg);
	}
}
@keyframes ringStroke {
	0% {
		stroke-dashoffset: 452;
		transform: rotate(-45deg);
		stroke: #F25840;
	}
	10% {
		 
		stroke: #F27E40;
	} 
	20% {
		 
		stroke: #FBAF1D;
	} 
	30% {
		 
		stroke: #F2D740;
	} 
	40% {
		 
		stroke: #16E69F;
	}
	50% {
		stroke-dashoffset: 169.5;
		transform: rotate(-180deg);
		stroke: #16E69F;
	}
	60% {
		 
		stroke: #16E69F;
	}
	70% {
		 
		stroke: #F2D740;
	}
	80% {
		 
		stroke: #FBAF1D;
	}
	90% {
		 
		stroke: #F27E40;
	}
	100% {
		stroke-dashoffset: 452;
		transform: rotate(-45deg);
		stroke: #F25840;
	}
}

@media screen and (max-width: 1024px){ 
	.frame-wrap h2.title{ font-size: 24px; }
	.frame-wrap p.subtitle{ font-size: 16px; margin-bottom: 24px; }
	.frame-wrap .frame-1 .btn-frame{ padding-top: 30px; padding-bottom: 22px; }
	
	.frame-wrap .frame-2 .btn-frame{ width: calc( (100% - 24px) / 2); height: 88px; }
	.frame-wrap .frame-2 .btn-frame:nth-of-type(3n){ margin-right: 12px; } 
	.frame-wrap .frame-2 .btn-frame:nth-of-type(3n+1){ clear: none; margin-left: 12px; } 
	.frame-wrap .frame-2 .btn-frame:nth-of-type(2n){ margin-right: 0; } 
	.frame-wrap .frame-2 .btn-frame:nth-of-type(2n+1){ clear: both; margin-left: 0; }
	
	.frame-wrap .frame-2 .btn-frame h3,
	.frame-wrap .btn-frame.btn-frame-simple h3{ font-size: 18px; }
	.frame-wrap .frame-2 .btn-frame p,
	.frame-wrap .btn-frame.btn-frame-simple p{ font-size: 14px; } 
	
	.frame-wrap .btn-frame.btn-frame-simple{ height: 88px; }
	
	.frame-wrap{ padding-top: 44px; padding-bottom: 54px; }
	.frame-wrap .top-bar{ padding-top: 10px; padding-bottom: 10px; }
	.frame-wrap .bottom-bar{ height: 54px; background: rgba(255,255,255,0.8); }
	.frame-wrap .bottom-bar .slider, .frame-wrap .bottom-bar > span{ top: auto; bottom: 6px; }
	.frame-wrap .bottom-bar .slider{ height: 60px; 
		-moz-transform: translate(-50%,0);
	    -webkit-transform: translate(-50%, 0);
	    -o-transform: translate(-50%,0);
	    -ms-transform: translate(-50%,0);
	    transform: translate(-50%, 0);
	}
	.frame-wrap .bottom-bar .slider .progress,
	.frame-wrap .bottom-bar .slider{ height: 16px; border-radius: 8px; }
	.frame-wrap .bottom-bar > span{ font-size: 14px; }
	.frame-wrap .bottom-bar .slider .point{ width: 22px; height: 22px; top: -26px; }
}

@media screen and (max-width: 640px){ 
	.frame-wrap .product-info{ 
		clear: both; float: none; margin-bottom: 24px; margin-left: auto; margin-right: auto; 
		width: 100%; max-width: 400px;
	}
	.frame-wrap .bottom-bar .slider{ width: calc(100% - 240px); }
	.frame-wrap .product-info:nth-of-type(2n){ float: none; }	
	.frame-wrap .bottom-bar > span{ font-size: 10px; }
	.frame-wrap .bottom-bar > span:last-child{ margin-left: 0; left: auto; right: 12px; }
	.frame-wrap .bottom-bar > span:first-child{ margin-right: 0; right: auto; left: 12px; }
	
}
@media screen and (max-width: 500px){ 
	.frame-wrap .btn-frame.btn-frame-simple,
	.frame-wrap .frame-2 .btn-frame,
	.frame-wrap .frame-1 .btn-frame{ width: 100%; margin-left: 0!important; margin-right: 0!important; margin-bottom: 12px!important; margin-top: 0!important; }
	.frame-wrap .bottom-bar > span{ display: none; }
	.frame-wrap .bottom-bar .slider{ width: calc(100% - 48px); } 
}


 