.overlay, .modal {
	display: flex;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.7);
	transition: opacity 300ms, visibility 300ms;
	z-index: 9999;
	visibility: hidden;
	opacity: 0;
}

.overlay:target, .modal.visible {
	visibility: visible;
	opacity: 1;
}

.popup, .popin {
	position: relative;
	width: 100vw;
	height: 100%;
	margin: auto;  
	overflow: hidden;  
	overflow-y: auto;
	background-color: #ffffff;    
	border-radius: .2rem; 
	padding-bottom: 5.6rem;
	/* transition: all 1s ease-in-out; */
} 
.popup > div {padding: 2.4rem 1.2rem 0 2.4rem;}

.popin.img {
	background-color: transparent;
	margin: 0;
	padding: 0;
	width: 100vw;
	max-height: unset;
	height: 100vh;
}
.popin .icon{font-size: 4.8rem;color:#ffffff;}

.popin img {border-radius: .8rem;}
.popin header {text-align: right;}
.popin .content {
	text-align: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.popup header {
	position: sticky;
	top: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	text-transform: uppercase;
	font-family: 'Montserrat';
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: .5px;
	background-color: #FFFFFF;
	z-index: 10;
	padding-top: 1.6rem;
}

.popup .title {
	margin: 0;
	color: rgb(0,0,0,.87)!important;
	font-weight: 600;
}

.full-h {
	height: 100%;
}
.oflow-X-0{

	overflow-x: hidden;
}
.oflow-0 {overflow: hidden;}
.popup h2 {
	margin-top: 0;
	margin-bottom: 2.4rem;
	color: rgb(25 151 198)!important;
	font-size: 3.6rem;
	font-family: Oswald;
	letter-spacing: .5px;

}

.popup .close > a:last-child  { 
	margin: 0 0 0 auto;   
	font-weight: bold;
	text-decoration: none;
	color: #333;
	transition: color 200ms; 
}
.picker {   
	position: fixed;
	height: 100vh;
	width: 100vw;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #ffffff;	
	transition: opacity 300ms, visibility 300ms;
	z-index: 9999;
	visibility: hidden;
	opacity: 0;
	padding: 0 1.6rem 5.6rem;	
	overflow: hidden;
	overflow-y: auto;
}

.picker a.close {
	text-align: right;
	color: #333333;
	display: block;
	position: sticky;
	background-color: #ffffff;
	top: 0;
	z-index: 10;
	margin-bottom: .8rem;    
	padding-top: 1.6rem;
}
.picker a.close + p {margin-bottom: 2.4rem;font-family: Oswald;text-transform: uppercase;}

.picker.visible {visibility: visible;opacity: 1;}
.popup .close-popup,.picker a.close i {font-size: 3.6rem; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48;vertical-align: middle;}
.popup .close-popup{padding-right: 1.6rem;}
.popup .close > a:hover, .picker a.close:hover {color: #06D85F;}

.popup_header 
{
	font-size: 28px;
	font-weight: 400;
	font-family: Oswald, Roboto, sans-serif;
	margin-bottom: 2rem;
	text-transform: uppercase;
}

.popup_content {font-size: 1.8rem;line-height: 1.5;}
.modal-content.slider {height: calc(100% - 24px);}
.modal-content.slider > div {
	width: 300%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;  
}

.modal-content.slider .slide {
	width: calc(100% /3);
	height: 100%;
	overflow: hidden;
	overflow-y: auto;  
	padding: 1.5rem 2.4rem;
}
.slide-home {transform: translateX(calc(-100% /3));}
.slide-standard {
	transform: translateX(0);
}
.slide-custom {transform:translateX(calc(-100% + 100% / 3))}

@media screen and (min-width: 640px)
{


	.popin img {max-width: 640px;}
	.popup_container {        
		/*width: 40%;
		max-height: 50%;
		padding: 2.5rem;*/
	}
	.preferences { max-width: 56rem; }
}

@media screen and (min-width: 1024px)
{
	.popin .content {
		text-align: center;
		position: absolute;
		right: 50%;
		top: 50%;
		transform: translate(50%, -50%);
	}
	.popup{         
		max-width: 56rem;
		max-height: 50vh;   
		border-radius: .2rem; 
		/* transition: all 1s ease-in-out; */
	}
	.popup > div {padding: 2.4rem;}
	.preferences { max-width: 56rem; }
	.popup.mx-w45 { max-width: 50%;}
	.popup.fullscreen{
		max-width: unset;
		max-height: unset;   
	}
	.picker {   
		max-width: 56rem; 
		max-height: 50vh;
		border-width: .2rem;
		border-radius: .4rem;
		border-style: solid;
		border-color: #dddddd;    
		margin: auto;    
	}
}