/*************************************************************************************************************
***** MODAL *********************************************************************************************
**************************************************************************************************************/
.modal{position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;opacity: 0;z-index: -1;pointer-events: none;transition: var(--trans);}
.modal.open{opacity: 1;z-index: 8000;pointer-events: all;transition: var(--trans);}
.modal-backdrop{position: absolute;top: 0;left: 0;width: inherit;height: inherit;background: rgba(0, 0, 0, 0.2);}
.modal-main{width: 100%;max-width: 745px;height: auto;box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.2);position: relative;z-index: 8001;}
.modal-controls{width: auto;height: auto;position: absolute;top: 0;right: 0;z-index: 10;display: flex;justify-content: flex-end;}
.modal-controls a.modal-close{margin: 5px;padding: 20px;}
.modal-body{width: 100%;height: 100%;min-height: 400px;float: left;position: relative;}

/*
*
* Region Modal 
*
*/
#modal-region{background-color: white;padding: 25px;padding-top: 50px;z-index: 1;}
#modal-region:before{content: "";position: absolute;top: 10%;left: 10%;width: 80%;height: 80%;background-image: url(../images/globe-map.svg);background-size: contain;background-position: center;background-repeat: no-repeat; z-index: -1;}

/* -- Region Header */
#modal-region .region-header,
#modal-region .region-body{width: 60%;left: 20%;float: left;position: relative;}

#modal-region .region-header__titles,
#modal-region .region-header__title,
#modal-region .region-header__subtitle{width: 100%;float: left;position: relative;}
#modal-region .region-header__title{font-family: var(--font-family-500);font-size: var(--font-size-small);line-height: var(--font-lh-normal);letter-spacing: var(--font-ls-big);text-transform: uppercase;margin-bottom: 7px;}
#modal-region .region-header__subtitle{font-family: var(--font-family-400);font-size: var(--font-size-text);line-height: var(--font-lh-body);letter-spacing: var(--font-ls-medium);}
#modal-region .region-header__title,
#modal-region .region-header__subtitle{text-align: center;}

/* -- Region Body */
#modal-region .region-body{margin-top: 40px;}
.regions-list{width: 70%;left: 15%;float: left;position: relative;padding: 0px 20px;margin: 20px 0px 60px;}
.regions-list__item{width: 100%;float: left;position: relative;display: grid;grid-template-columns: 4fr 1fr;margin-bottom: 15px;}
.region-item__input{width: 100%;position: relative;display: flex;align-items: center;}
.region-item__flag{display: flex;justify-content: flex-end;}
.region-item__flag img{width: 24px;height: 14px;float: left;}
.regions-buttons{width: 100%;float: left;position: relative;display: flex;justify-content: center;}


@media(max-width: 991px){
	/*************************************************************************************************************
	***** MODAL **************************************************************************************************
	**************************************************************************************************************/
	
	.modal-main{width: calc(100% - 40px);max-width: 500px;}
	.modal-controls a.modal-close{margin: 0;}
	
	/*
	*
	* Region Modal
	*
	*/
	#modal-region .region-header,
	#modal-region .region-body,
	#modal-region .regions-list{width: 100%;left: 0;margin: 0px 0px 40px;}
	#modal-region:before{width: 100%;left: 0;background-position: center 35%;}
	#modal-region .region-body{margin-top: 80px;}

}