/****************************************************/    
/*****    MODAL CLOSE FOOTER     ******/
/****************************************************/    

.container-modal:after,.container-modal:before {content:""; display:table; clear:both;}
.container-modal {padding:0.01em 16px;}

.my-modal {
z-index:3;
border-radius:10px;
display:none;
padding-top:150px;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
overflow:auto;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.4);
}

.my-modal-content {margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
@media (max-width:600px) {.my-modal-content {margin:0 10px;width:auto!important}. my-modal {padding-top:50px}}
@media (max-width:768px) {.my-modal-content {width:500px} .my-modal {padding-top:80px}}
@media (min-width:993px) {.my-modal-content {width:900px}}

.modal-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.modal-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}

.modal-card {box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}





.fa-close-container {
  position: relative;
  display: inline-block; /* Or block, depending on layout */
	width: 20px;
	height: 20px;
text-align:center;
}


.fa-close.fa-hover-hidden {
	width: 20px;
	height: 20px;
  display: inline-block; /* Or block, depending on layout */
}

.fa-close.fa-hover-show {
color:#525252;
cursor: pointer; 
	width: 20px;
	height: 20px;
}

* > .fa-close.fa-hover-show,
*:hover > .fa-close.fa-hover-hidden {
    display: none;
}

*:hover > .fa-close.fa-hover-show {
    display: inline-block;
}