/*
  modal.css
*/

.overlay{position:fixed; display:none;opacity:0.9; background: #000; width:100%; height:100%; z-index:20; top:0; left:0;}

.modal{
  position:fixed;
  display:none;
  top:3.5em;
  bottom:3.5em;
  width: 40em;
  left: 50%;
  transform: translateX(-50%);
  background-color: #FFF;
  z-index: 21;
  /*opacity: 0;*/
  /*visibility: hidden;*/
  transition-delay: .3s;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

/* btn close */
a#modal-close{position:absolute; display:block; top:0; right:-3em; color:#FFF; z-index:22;}
a#modal-smart-close{position:absolute; display:none; top:1.5em; right:1.5em; color:#1E1E1E; z-index:22;}   /* smart */

#modal-wrap{
	position: relative;
	width: 100%;
	height: 100%;
	float: left;
	padding: 2.5em;
  overflow-y: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #999 #fff;
}

#modal-wrap:before{
	position: fixed;
	content: "";
	top: 0px;
	left: 0px;
	right: 0px;
	height: 50px;
	background-color: #fff;
	z-index: 2;
}

#modal-wrap:after{
	position: fixed;
	content: "";
	bottom: 0px;
	left: 0px;
	right: 0px;
	height: 50px;
	background-color: #fff;
	z-index: 2;
}

/* modal scrollbar customized */
#modal-wrap::-webkit-scrollbar{width:11px;}
#modal-wrap:-webkit-scrollbar-track{background: #fff;}
#modal-wrap::-webkit-scrollbar-thumb{background-color: #999; border-radius: 10px; border: 3px solid #fff;}

#modal-wrap img{max-width:100%;}

#modal-title{font-size:2em; margin:0 0 1em 0; font-family:'dm'; line-height:1em;}
  #modal-title hr{width:80px; height:4px; border:0; background-color:#EFEFEF; margin:0.750em 0 0.750em 0;}

#modal-content{}

  /* modal blocks */
  .modal-block-text{font-size:0.8em; line-height:1.8em;}

  /* splideJS slider in modal */
  .modal-slider-pagination{z-index:22 !important;}

/* <= 768 */
@media screen and (max-width:768px){
  .modal{width:80%;}
}

/* <= 520 */
@media screen and (max-width:520px){
  a#modal-close{display:none;}
  .modal{width:100%; top:0; bottom:0;}
  a#modal-smart-close{display:block;}
  #modal-title{font-size:1.5em;}
  #modal-wrap .unit-50{width:100%;}
  #modal-wrap #card-text{padding-right:0;}
  #modal-wrap #card-features-wrap{margin-top:2em; border-left:0; padding:0;}
  #modal-wrap #profil-buttons-wrap{display:none;}
}