.simple-modal-wrapper, .simple-modal-wrapper *{
	padding: 0;
	margin: 0;
}

.simple-modal-wrapper{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background-color: rgba(48,48,48, 0.8);
}

.modal-content{
	width: calc(100% - 20px);
	position: absolute;
	top: 50%;
	left: 50%;

    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    	transform: translate(-50%, -50%)
}

.modal-heading{
	padding: 5px 10px;


	border-top-left-radius: inherit;
	border-top-right-radius: inherit;

	background-color: #3498db;
	color: #FFF;
	font-weight: bold;



	font-size: 1.0em;
}

.close-modal{
	float:right;
	cursor: pointer;
	vertical-align: middle;

	color: #bdc3c7;
	line-height: 0.5em;
	font-size: 2em;
	font-weight: normal;

	transition: color 0.2s ease-in-out;
}

.close-modal:hover{
	color: #FFF
}


.modal-body{
	padding: 10px;

	background-color: #fff;
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
}

/*------------ MEDIA QUERIES FOR SIMPLE MODALS ------------*/

@media screen and (min-width: 501px){
	.modal-content{
		width: 90%;
	}
}

@media screen and (min-width: 768px){
	.modal-content{
		width: 80%;
	}

	.modal-heading{
		padding: 10px 20px;
		font-size: 1.2em;
	}

	.modal-body{
		padding: 20px;
	}
}

@media screen and (min-width: 1024px){
	.modal-content{
		width: 60%;
	}
}


/*---------------------------------------------- IMAGE MODAL STYLES ----------------------------------------------*/
/* --------------------------------------------------------------------------------------------------------------- */

.image-modal {

	cursor: pointer;
	cursor: -moz-zoom-in; 
    cursor: -webkit-zoom-in; 
}

.image-modal-div {
	padding: 0;
	margin: 0;

	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	cursor: alias;
	cursor: -moz-zoom-out; 
    cursor: -webkit-zoom-out; 

	background-color: rgba(48,48,48, 0.9);
}

.image-modal-div img.image-modal-image{
	/*this gives us the actual image size*/
	width: auto;

	/* this corrects sizes given by auto if
	 the viewport(mobile) is smaller than image */
	max-width: calc(100% - 20px);

	/*this scales images to viewport height */
	max-height: 100%;
}

.close-image-modal {
	position: absolute;
	right: 10px;
	top: 10px;

	font-size: 3em;
	font-weight: normal;
	line-height: 0.5em;

	cursor: pointer;
	transition: color 0.2s ease-in-out,
				opacity 0.2s ease-in-out;	
	opacity: 0.7;
}

.close-image-modal:hover {
	color:#FFF;
	opacity: 1;
}