/* --------- ModalWindow --------- */

.modal-window {
    display: none;
    
    position: fixed;
    
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    
    z-index: 1001;
    
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-window-visible {  
    display: block;
}
.ui-modal-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; 

/*  Prevent content position to Out of top screen */
    min-height: 100%;
    
    width: 100%; /* Full width (cover the whole page) */
	
	padding-top: 50px;    /*interval for close-btn */
	
	position: relative;
	overflow: auto;

}
.ui-full-page {
    width: 100vw; 
    height: 100vh; 
	overflow-y: auto;
/*    background-color: #eee;*/
    background-color: #64ffda;
}

/* Hide body content with transparent overley */
.ui-modal-body-hide {
    
    position: fixed; /* Sit on top of the page content */
	
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    
    background-color: #000;
    opacity: 0.75;
    
    z-index: 999;   
    overflow: hidden; 
}




.ui-modalWindow-close-ico {
	position: absolute;
	display: block;
    right: 15px;
    top: 45px;
	width: 20px;
	height: 20px;
	background: url(./ModalWindow_Close_Ico.svg);
	background-size: contain;
	cursor: pointer;
}



.ui-modalWindow-close-small-ico {
	position: absolute;
	display: block;
    right: 15px;
    top: 15px;
	width: 10px;
	height: 10px;
	background: url(./ModalWindow_Close_Ico.svg);
	background-size: contain;
	cursor: pointer;
}

.ui-modalWindow-close-ico-white {
	position: absolute;
	display: block;
    right: 15px;
    top: -35px;
	width: 20px;
	height: 20px;
	background: url(./ModalWindow_Close_Ico_White.svg);
	background-size: contain;
	cursor: pointer;
}
.ui-modalWindow-close-ico-white-fullPage {
	position: absolute;
	display: block;
    right: 35px;
    top: 35px;
	width: 20px;
	height: 20px;
	background: url(./ModalWindow_Close_Ico.svg);
	background-size: contain;
	cursor: pointer;
    transform: rotate(0);
}
.ui-modalWindow-close-ico-white-fullPage:hover {
    transition: all 0.35s;
	transform: rotate(180deg);
    
}


/* --------------------------------- ModalWindow Animations --------------------------------- */

.ui-modalWindow-animation-ZoomIn {
	-webkit-animation-name: modal-zoomIn;
    -webkit-animation-duration: 0.6s;
    animation-name: modal-zoomIn;
    animation-duration: 0.6s; 
}

@-webkit-keyframes modal-zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes modal-zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.ui-modalWindow-animation-FadeInTop {
    -webkit-animation-name: modal-FadeInTop;
    -webkit-animation-duration: 0.4s;
    animation-name: modal-FadeInTop;
    animation-duration: 0.4s; 
}

@-webkit-keyframes modal-FadeInTop{
    from {top: -300px; opacity: 0} 
    to {top: 0; opacity: 1}
}

@keyframes modal-FadeInTop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}