#modal-overlay {
	width:100%;
	height:100%;
	z-index:99999999; /* places the modal overlay between the main page and the modal dialog*/
	background-color:#000;
	opacity:0.85;
	position:fixed;
	top:0;
	left:0;
	display:none;
	margin:0;
	padding:0;
	min-width: 320px;
}

#modal {
	width:35%;
	margin-left:auto;
	margin-right:auto;
	border: 0;
	background-color:#fff;
	z-index:999999999; /* places the modal dialog on top of everything else */
	min-width: 480px;
	position:fixed;
	top:25%;
	left:32.5%;
	display:none;
}

#modal h1 {
	color: #0C384C;
	font-size: 38px;
	font-weight: 500;
	margin: 12px auto 20px auto;
	text-align:center;
}

#modal button{
	background-color: transparent;
	border: 0;
	font-size: 12px;
	padding: 16px;
	text-transform: uppercase;
}

#modal div{
	border-top: 1px solid rgb(232, 232, 232);
	background: #fcfcfc url('../images/content/modal/modal-background-50.jpg') center top no-repeat;
	padding: 48px;
}

#modal p{
	color: #1f1f1f;
	font-weight: 500;
	margin-bottom: 24px;
	text-align: center;
}

#modal .fa-times{
	margin: 0;
	padding-left: 8px;
	font-size: 16px;
}

#do-not-show{
	color: rgb(22, 101, 158);
	display: inline-block;
}

#close-modal{
	color: #1f1f1f;
	float: right;
	font-weight: 400;
}

#modal-link{
	background-color: rgb(22, 101, 158);
	color: #FFF;
	display: block;
	line-height: 1;
	padding: 18px 32px;
	font-size: 14px;
	font-weight: 500;
	margin: auto;
	max-width: 350px;
	text-align: center;
	width: 95%;

}

#modal-link:focus{
 	outline: -webkit-focus-ring-color auto 5px;
}

.screen-reader-offscreen {
	position:absolute;
	left:-999px;
	width:1px;
	height:1px;
	top:auto;
}

#modal{
    opacity: 0;
    filter: alpha(opacity=0);

	-webkit-animation: pageStart 1s ease-in-out forwards;
	   -moz-animation: pageStart 1s ease-in-out forwards;
  			animation: pageStart 1s ease-in-out forwards;

    -webkit-transform: translateY(20px);
       -moz-transform: translateY(20px);
        -ms-transform: translateY(20px);
            transform: translateY(20px);
}

#modal-overlay{
	opacity: 0;
	filter: alpha(opacity=0);

	-webkit-animation: overlayStart 500ms ease-in-out forwards;
	   -moz-animation: overlayStart 500ms ease-in-out forwards;
  			animation: overlayStart 500ms ease-in-out forwards;
}


@-webkit-keyframes pageStart {
  to {
    opacity: 1;
    filter: alpha(opacity=100);

    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
            transform: translateY(0);
  }
}

@-webkit-keyframes overlayStart {
  to {
    opacity: 0.85;
    filter: alpha(opacity=85);
  }
}
@keyframes pageStart {
  to {
    opacity: 1;
    filter: alpha(opacity=100);

    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes overlayStart {
  to {
    opacity: 0.85;
    filter: alpha(opacity=85);
  }
}

.no-csstransforms3d #modal,
.no-csstransforms3d #modal-overlay{
    -ms-transform: none !important;
}

.no-csstransforms3d #modal{
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

.no-csstransforms3d #modal-overlay{
    opacity: 0.85 !important;
    filter: alpha(opacity=85) !important;
}

@media only screen and (max-width:1600px){
	#modal div{
		padding: 32px;
	}
}


@media only screen and (max-width:70em){
	/*1120px*/
	#modal{
		left: 50%;
		margin-left: -240px;
	}
}

@media only screen and (max-width:600px){
	#modal{
		margin-left: auto;
		min-width: 320px;
		left: auto;
		top: auto;
		width: 100%;
		overflow-y: scroll;
	}

	#modal div{
		background:transparent;
		padding: 16px;
	}
}

@media only screen and (max-width:480px){
	#modal{
		margin-left: auto;
		min-width: 320px;
		left: auto;
		top: auto;
		width: 100%;
	}

	#modal-link{
		padding: 16px;
		width: 100%;
	}

	#modal button{
		font-size: 10px;
		padding: 12px;
		position: relative;
		margin: 0;
		vertical-align: middle;
	}

	#close-modal{
		padding-top: 8px !important;
	}
}