body.modal-open {
    overflow: hidden;
	position: fixed;
	width: 100%;
    height: 100%;
}

.modal {
	position: fixed;
	background: #FFFFFF;
	height: auto;
	top: 0;
	bottom: 0px;
	left: 0px;
	right: 0px;
	width: 100%;
	max-width: 600px;
	padding-top: 1px;
	margin: 50px auto;
	border-radius: 3px;
	overflow: hidden;
	opacity: 1 !important;
	z-index: 10000 !important;
	-webkit-animation: floatDownZ .5s ease-out;
	animation: floatDownZ .5s ease-out;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

@media (max-height: 899px) {
	.modal {
		margin: 30px auto;
	}	
}

@media (max-height: 770px) {
	.modal {
		margin: 20px auto;
	}
}

.modal .title-container{ 
	position:relative;  
	padding-top: 50px;
	z-index:5; 
	clear:both; 
	background-color: #fff;
} 
.modal .title{ 
	font-size: 24px;  
	line-height: 1.5;
	text-align: center; 
	margin:0px 75px; 
	float:none; 
}  
.modal .body-container{    
	position:absolute; 
	height:auto; 
	top: 100px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	padding: 20px 50px 50px;
	overflow:auto;
	will-change: scroll-position;
} 
.modal .body-container h2 {
	position: relative; 
	width: 100%; 
	height: auto;
	min-height: 50px;
	line-height: 50px; 
	background-color:rgba(0,0,0,.02); 
	font-size: 20px;
	font-weight: normal;
	text-align: center; 
	padding: 0px;
	margin: 0px 0px 0px 0px;
	clear: both;
}
.modal .title-bttn {
	width: 75px;
	height: auto;
	min-height: 50px;
	padding:0px;  
	position: relative; 
	margin:0px; 
	background:transparent; 
	border-radius: 0px; 
	box-shadow:none; 
	float: left; 
	cursor:pointer; 
} 
.modal .title-button-group{ 
	float:right;
	position: relative; 
	min-height: 50px; 
}
.modal .title-bttn.selected {
	background:rgba(0,0,0,.1); 
}
.modal .title-bttn:hover {
	background:rgba(255,255,255,.2); 
} 
.modal .title-bttn:active {
	background:rgba(0,0,0,.1); 
}
.modal .title-bttn.close {   
	display:block;  
} 
.modal .title-bttn.close:hover { 
	background-color:rgba(255,255,255,.2);   
} 
.modal .title-bttn:focus:after{ 
	border:6px solid rgba(255,255,255,.2);  
}
.modal .title-bttn span {
	width: 30px;
	height: 2px; 
	background: #FFF;
	margin: 7px auto;
	display: block; 
	transition:all .2s ease-in;  
	-moz-transition:all .2s ease-in; 
	-webkit-transition:all .2s ease-in; 
	-o-transition:all .2s ease-in;
} 
.modal .bttn.close span {
	width: 30px;
	height: 2px; 
	background: #FFF;
	margin: 0px auto;
	display: block; 
	transition:all .2s ease-in;  
	-moz-transition:all .2s ease-in; 
	-webkit-transition:all .2s ease-in; 
	-o-transition:all .2s ease-in;
} 
.modal .bttn.close span:first-child{
	margin-top: -2px; 
	-webkit-transform: rotateZ(45deg); 
	-moz-transform: rotateZ(45deg); 
	transform: rotateZ(45deg); 
} 
.modal .bttn.close span:nth-child(2){
	margin-top: -2px; 
	-webkit-transform: rotateZ(-45deg); 
	-moz-transform: rotateZ(-45deg); 
	transform: rotateZ(-45deg);
}
.modal .title-bttn.nav span:first-child{
	margin-top: 4px;
}
.modal .title-bttn.nav:hover span, 
.modal .title-bttn.nav:active span, 
.modal .title-bttn.nav.selected span{
	margin:4px auto; 
}
.modal .title-bttn.nav:hover span:first-child, 
.modal .title-bttn.nav:active span:first-child, 
.modal .title-bttn.nav.selected span:first-child{
	margin-top: 3px;
} 
.modal .title-bttn.close span {
	width: 30px;
	height: 2px; 
	background: #FFF;
	margin: 0px auto;
	display: block; 
	transition:all .2s ease-in;  
	-moz-transition:all .2s ease-in; 
	-webkit-transition:all .2s ease-in; 
	-o-transition:all .2s ease-in;
} 
.modal .title-bttn.close span:first-child{
	margin-top: -2px; 
	-webkit-transform: rotateZ(45deg); 
	-moz-transform: rotateZ(45deg); 
	transform: rotateZ(45deg); 
} 
.modal .title-bttn.close span:nth-child(2){
	margin-top: -2px; 
	-webkit-transform: rotateZ(-45deg); 
	-moz-transform: rotateZ(-45deg); 
	transform: rotateZ(-45deg);
} 

.modal .title-bttn.back span {
	width: 30px;
	height: 2px; 
	background: #FFF;
	display: block; 
	margin-left: auto;
	margin-right: auto; 
	transition:all .2s ease-in;  
	-moz-transition:all .2s ease-in; 
	-webkit-transition:all .2s ease-in; 
	-o-transition:all .2s ease-in;
} 
.modal .title-bttn.back span:first-child{
	margin-top: 2px;
	position: absolute;
	width: 21px;
	left: -16px;
	right: 0px; 
	-webkit-transform: rotateZ(-40deg); 
	-moz-transform: rotateZ(-40deg); 
	transform: rotateZ(-40deg);
} 
.modal .title-bttn.back span:nth-child(2){
	margin-top: 14px;
	position: absolute;
	width: 21px; 
	right: 0px;
	left: -16px; 
	-webkit-transform: rotateZ(40deg); 
	-moz-transform: rotateZ(40deg); 
	transform: rotateZ(40deg);
} 
.modal .title-bttn.back span:last-child{
	margin-top: 8px;
}
.modal .title-option-container{ 
	display:none; 
	position:absolute; 
	width:300px; 
	height:auto; 
	min-height:40px;
	background:#293034;  
	box-shadow:0px 6px 1px rgba(0,0,0,.3);  
	top:100%; 
	right:0px;  
	z-index:5; 
}  
.modal .body-container h1{ 
	position:relative; 
	height:auto;
	min-height:40px;
	line-height:40px;  
	font-size:20px;  
	padding:0px 0px 0px 15px; 
	margin:0px 0px 0px 0px; 
	clear:both; 
} 
.modal .content-panel{ 
	background: none; 
}
.modal .content-panel .row [class*="bttn"]:not(.date) {
  float: right;
}
/*buttons*/ 
.modal .button-container{ 
	position:absolute; 
	width:100%; 
	height:auto; 
	bottom:0px; 
	min-height:60px;   
	background:#fff; 
	border:none;  
	color:#FFF; 
	background-color: #fff;
	padding:0px;   
	z-index:3; 
} 
.modal .button-container [class*="bttn"]:not(.bttn-red):not(.bttn-outline){ 
	float:right;   
}   
.modal-shadow{ 
	position:fixed;
	width:100%; 
	height:100%; 
	top:0px; 
	left:0px; 
	right:0px; 
	bottom:0px; 
	z-index:8000; 
	background-color: rgba(0,0,0,.75); 
} 

/* Modal Forms */

.modal label { 
	color: #000; 
}

.modal .body-container input, 
.modal .body-container input[type="text"],
.modal .body-container textarea {
	border-top: none;
	border-right: none;
	border-left: none;
	border-bottom: 1px solid #c7c7c7;
	padding: 5px 3px 2px;
	color: #616875;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 26px;
	margin: 0;
	border-radius: 0;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

@media all and (max-width: 730px) 
{ 
	.modal{ 
		top:0px; 
		bottom:0px; 
	} 
	.modal .title{  
		font-size: 16px; 
	}
	.modal .body-container h2{ 
		font-size: 16px; 
	}
	.modal .content-panel .row{ 
		max-width: 450px; 
	}
	.modal input:not([type="button"]), .modal textarea, .modal select{ 
		font-size: 14px; 
	}
} 

@media all and (max-width: 500px) 
{ 
	.modal .title{  
		font-size: 20px; 
	} 
	
	.modal .body-container {
		bottom: 0px;
		padding: 20px 30px 50px;
	}
} 

@media (min-width:320px) and (max-width: 480px) {
	.modal {
		margin: 0;
	}	
	
	.modal .row {
		display: block;
	}
	
	.modal .row > *[class*='col'] {
		max-width: 100%;
	}
	
}