/* POPUP PREVIEW */

img.group__element-img {
	width: 380px;
	height: 380px;
}
.group__element{
	display: inline-block;
	margin: 10px;
	cursor: pointer;
}
.group__element-name{
	text-transform: uppercase;
	font-size: 1rem;
	font-weight: 900;
	margin-top: 13px;
	padding-right: 30px;
}
.group__element{
	position: relative;
	cursor: pointer;
}
.to-open{
	display: none!important;
}
.group__element.active .to-open{
	display: block!important;
	position: absolute;
    top: 355px;
    right: 25px;
}
.to-open{
	width: 50px;
	height: 50px;
	background-color: #00b1c4;
	border-radius: 50%;
	text-align: center;
}
.to-open img{
	width: 25%;
	margin: 37.5% auto ;
}
.popUp-wrap{
	display: none;
}
.popUp-wrap.open{
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	display: flex;
	-ms-align-items: center;
	align-items: center;
	justify-content: center;
	height: 100vh;
	width: 100vw;
	animation: bg-anim .8s linear forwards ;
}
.popUp-wrap.open.closed-popup-anim{
	animation: closed-popup-anim .5s linear forwards ;
}
@keyframes bg-anim{
	from{
		background: rgba(0,0,0,0);
	}
	to{
		background: rgba(0,0,0,0.4);
	}
}
@keyframes closed-popup-anim{
	from{
		background: rgba(0,0,0,0.4);
	}
	to{
		background: rgba(0,0,0,0);
	}
}

/* OPEN POPUP */
@keyframes scale-popup{
	from{
		transform: scale(0);
	}
	to{
		transform: scale(1);
	}
}
@keyframes scale-popup-out{
	from{
		transform: scale(1);
	}
	to{
		transform: scale(0);
	}
}
.popUp-wrap.open .popUp{
	animation: 0.3s scale-popup cubic-bezier(0.53, 0.01, 0.36, 1.63);
}
.popUp-wrap.open.closed-popup-anim .popUp{
	animation: 0.3s scale-popup-out forwards;
}
.popUp{
	position: relative;
	height: 55vh;
	width: 55vw;
	cursor: initial;
	background-color: #fff;
	z-index: 101;
}
.popUp--close{
	position: absolute;
	top: -25px;
	right: 28px;
	cursor: pointer;
	width: 50px;
	height: 50px;
	background-color: #00b1c4;
	border-radius: 50%;
	text-align: center;	
    z-index: 102;
}
.popUp--close img{
	width: 25%;
	margin: 37.5% auto;	
}
img.popUp-bg{
	position: absolute;
	bottom: 0;	
    left: 8%;
	z-index: 100;
	display: none;
}

/* STYLES INSIDE POPUP */
.popUp .container{
	height: 100%;
}
.popUp .container .row{
	height: 100%;
}
.popup-avatar-container{
	height: 100%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-ms-align-items: center;
	align-items: center;
	justify-content: center;
}
.popup-avatar-container .popup-avatar{
    width: 300px;
    height: 300px;	
    background-position: center;
    background-size: cover;
    border-radius: 50%;
}
.page__professional .popup-descr-container{
	padding-right: 6rem!important;
	text-align: justify;
}
/* STYLES INSIDE POPUP */
.iframe-wrapper{
    width: 100%;
    height: 90%;
    background: url(/img/ajax-loader.gif) center center no-repeat;
}

/* Scrollbar */
.popUp .container::-webkit-scrollbar-track, 
.group__element-description::-webkit-scrollbar-track,
.popup-descr-container::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

.popUp .container::-webkit-scrollbar,
.group__element-description::-webkit-scrollbar,
.popup-descr-container::-webkit-scrollbar{
	width: 5px;
	background-color: #F5F5F5;
}

.popUp .container::-webkit-scrollbar-thumb,
.group__element-description::-webkit-scrollbar-thumb,
.popup-descr-container::-webkit-scrollbar-thumb{
	background-color: #00b1c4;	
	background-image: -webkit-linear-gradient(45deg,
	rgba(255, 255, 255, .2) 25%,
	transparent 25%,
	transparent 50%,
	rgba(255, 255, 255, .2) 50%,
	  rgba(255, 255, 255, .2) 75%,
	transparent 75%,
	transparent)
}

/*----------btn color--------------*/

.to-open{
	background-color: #00b1c4!important;
}


@media (max-width: 450px) {
	.group__element.active .to-open{
    	top: 24vh;
	}
	.to-open img{
    	width: 25%;
	}
	.to-open{
		width: 35px;
		height: 35px;
	}
	.popUp{
    	padding: 35px 6%!important;
	}
}
/* FOR IE */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.popUp-wrap{
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(1,1,1,0.5);
		justify-content: center;
		-ms-align-items: center;
		align-items: center;
	}
	.popUp{
		margin-top: 9%;
		margin-left: 25vw;
	}
	.popUp-wrap{
		display: none;
	}
	.popUp-wrap.open{
		display: block!important;
	}
}