.mdl-close { position:fixed; top:20px; right:20px; width:55px; height:55px; display:block; 
				 background-color:rgba(0,0,0,0.25); /*border-radius:80px;*/ cursor:pointer;
				 	-moz-transition: color .5s ease-in-out;
				 	  -o-transition: color .5s ease-in-out;
				 -webkit-transition: color .5s ease-in-out;
				         transition: color .5s ease-in-out } 

	.mdl-close:hover	{ background-color:rgba(0,0,0,0.65)}

	#mdl-overlay		{ 	position:fixed; top:0; left:0;  width:100vw; height:100vh; opacity:0; z-index:10000;
								  background: rgba(0,93,171,0.9); 
						   background-repeat: no-repeat; 
							 background-size: 60%; 
					     background-position: bottom right; 
							 -moz-transition: all .5s ease-in-out;
							   -o-transition: all .5s ease-in-out;
						  -webkit-transition: all .5s ease-in-out;
						          transition: all .5s ease-in-out}

	#mdl-overlay.active { display:block; top:0; left:0; width:100vw; height:100vh}

	.mdl	{ 	position:fixed; top:0; left:0; 
				display:flex;align-items:center; justify-content:center; 
				width:100vw; pointer-events:none; height:100vh; z-index:10001; overflow-y:scroll; flex:.5 1 auto; box-sizing:border-box}

	.mdl.open 			{ display:flex}
	.mdl .mdl-container { width:80vw; height:auto; display:block; margin:0 auto; /*min-height:50vh;*/ /*height:80vh;*/ padding:50px; background-color:#ececec; 
							overflow-y:auto; max-height:100vh; box-sizing:border-box;
						-webkit-box-shadow: 5px 5px 0px 0px rgba(50, 50, 50, 0.09);
						   -moz-box-shadow: 5px 5px 0px 0px rgba(50, 50, 50, 0.09);
							    box-shadow: 5px 5px 0px 0px rgba(50, 50, 50, 0.09);}

	.mdl.mdl-fullscreen .mdl-container 	{ width:100vw; height:auto; min-height:100vh; background-color:#FFF}
	.mdl .mdl-container,.mdl-close		{ pointer-events:visible}
	.mdl,#mdl-overlay					{display:none;opacity:0}
	.mdl.open				{ display:flex}
	#mdl-overlay.active		{ display:block;opacity:0}

	.mdl	{	-moz-transition: all .5s ease-in-out;
		          -o-transition: all .5s ease-in-out;
		     -webkit-transition: all .5s ease-in-out;
		             transition: all .5s ease-in-out}

	.mdl.open.animIn,#mdl-overlay.active.animIn {	opacity:1; 
				-moz-transition: all .5s ease-in-out;
				  -o-transition: all .5s ease-in-out;
		     -webkit-transition: all .5s ease-in-out;
		             transition: all .5s ease-in-out}

	h2.titre 	{ margin-top:0} 

	.mdl-container		{ position:relative}
	.mdl-buttons		{ display:block; position:absolute; bottom:0; left:0; width:100%; height:60px; padding:0; margin:0}
	.mdl-buttons li 	{ list-style:none; float:left; width:50%; display:block; height:60px}
	.mdl-buttons li a 	{ display:block; height:60px; line-height:60px; text-transform:uppercase; color:#FFF;
							-webkit-transition: background-color 0.2s;
							   -moz-transition: background-color 0.2s;
							        transition: background-color 0.2s;
							        text-align:center; text-decoration:none}
	.mdl-buttons li:first-child a 		{ background:#fc7169; border-radius:0 0 0 .25em}
	.mdl-buttons li:first-child a:hover	{ background-color:#fc8982}
	.mdl-buttons li:last-child a 		{ background:#b6bece; border-radius:0 0 .25em 0}
	.mdl-buttons li:last-child a:hover	{ background-color:#c5ccd8} 
	.mdl .mdl-container					{ /*border-radius:.25em;*/}

	.mdl .mdl-container.medium 		{ min-height:200px; max-width:450px}
	.mdl.open.animOut,#mdl-overlay.active.animOut{ opacity:0; 
							-moz-transition: all .5s ease-in-out;
							  -o-transition: all .5s ease-in-out;
					     -webkit-transition: all .5s ease-in-out;
					     		 transition: all .5s ease-in-out}

	.mdl-close { background:rgba(0,0,0,0.3) url(images/icon-close.svg) no-repeat center center; cursor:pointer;}


	.mdl .mdl-container::-webkit-scrollbar {
    width: 0.5em;
	}
	 
	.mdl .mdl-container::-webkit-scrollbar-track {
	    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
	    background-color:#ececec;
	}
	 
	.mdl .mdl-container::-webkit-scrollbar-thumb {
	  background-color: #333;
	}


	/* ==========================================================================
	    Media Style
	============================================================================= */
    @media only screen and (max-width: 1024px) {
	.mdl .mdl-container { width:95vw;}
    .mdl-close { position:fixed; top:0px; right:25px; width:55px; height:55px; display:block; }
	.mdl .mdl-container { padding:30px 30px 80px 30px;}
    }

	@media only screen and (max-width: 1024px)  { 
	.mdl .mdl-container { padding:20px}
	}

	@media only screen and (max-width: 767px)  { 
	.mdl-close { right:10px; }
	}