/* Action Button
	------------------------------------------------------------------------- */
	a.button .g-btn 		{ padding:10px 20px; display:block; float:left; position:relative; z-index:2;
					   		  background-color:#333; color:#fff; transition: all 0.3s ease-out;}
	a.button:hover .g-btn 	{ background-color:#ccc; color:#666;}


	a.button { display:inline-block; cursor:pointer; border:0; position:relative; overflow:hidden; margin-bottom:10px;
	    	-webkit-border-radius: 5px;
	    			border-radius: 5px;
	  		   -webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
	                   box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
	            background-repeat: repeat-x; margin-left:10px; margin-top:15px}


	.mdl h2 	{ text-align:left; line-height:normal;}
	.mdl table  { border-top:1px solid #fff; padding-top:20px;}
	.mdl table tr td:first-child { text-align:right; width:150px}
	.mdl table tr td { padding:5px}

	.mdl input { background-color:#ccc; border:none; outline:none; padding:10px 2%;
					  width:90%; height:30px; color:#333; margin-left:10px;
					  font-family: Helvetica, Arial, Verdana, sans-serif; font-weight:normal; font-size:14px;}
	.mdl input:focus { background-color:#666; transition:all 0.3s ease; color:#fff}



	.mdl-pattern 		{  position:absolute; left:50%; margin-left:25%; top:300px; }
	.mdl-pattern>img	{ width:50px; height:auto;}

	.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, 0, 0, 0.8); 
						   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:50vw; height:auto; display:block; margin:0 auto; min-height:50vh; /*height:80vh;*/ padding:50px 50px 50px 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}


	.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-close 			{ position:fixed; top:0px; right:25px; width:55px; height:55px; display:block; }
	.mdl .mdl-container { width:95vw;}
    }



	@media only screen and (max-width: 767px)  { 
	.mdl-close 			{ right:10px; }
	.mdl .mdl-container { padding:20px;}
	.mdl input,
	a.button { margin-left:0}
	.mdl table tr  	 { display:block; width:100%}
	.mdl table tr td { display:block; width:100%; text-align:left;}
	.mdl table tr td:first-child { display:block; width:100%; text-align:left;}
	.mdl table tr td { padding:0px}
	.mdl table tr td:nth-child(even) { margin-bottom:10px}
	.mdl h2 	{ font-size:20px}
	.mdl 	{ font-size:14px}
	}