﻿.modal {
  
  display: block;

  width: 600px;
	max-width: 100%;
  
  height: 450px;
  max-height: 100%;

  padding: 20px;
  
  position: fixed;
  
  z-index: 1000000001;
  
  
  left: 50%;
  top: 50%;
  
  
  transform: translate(-50%, -50%);
  
  background: white;
  box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);
}

.closed {
  display: none;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000000001;
  
  background: rgba(0, 0, 0, 0.6);
}
.modal-guts {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.modal_ojp_logo{
	display: inline-block;
	margin-bottom: 20px;
	margin-left: 44%;
	height: 20%;
	width: 15%;
}

.modal-guts h1, .modal-guts h2, .modal-guts p{
	color: black;
	font-family: Georgia, serif;	
}
.modal-guts h1, .modal-guts h2{
	text-align: center;
}
.modal-guts h1{
	margin-bottom: 5px;
	font-size: 1.25rem;
}
.modal-guts h2{
	margin-bottom: 20px;
	font-size: 1rem;
}
.modal-guts p{
	font-size:1rem;
}

.modal-guts .link{
	color: blue;
	margin-bottom: 15px;
	margin-top:15px;
	text-align: center;
}

.modal-guts p button{
	border: none;
	border-radius: 3px;
	background-color: rgba(230, 230, 230, 1);
	margin-right: 15px;
	padding: 10px 15px;
}
.modal-guts .close-btn{margin-right: -15px;}
.modal-guts p button:hover{
	background-color: lightgray;
}
.p_button_row{
	margin: 20px 0 0 0;
	text-align: center;
}

.modallink{
	font-size:1rem;
}
a.modallink:link {
	font-family: sans-serif;
	font-size:1rem;
	font-weight: bold;
	color: #2159AD;
	text-decoration: none;
}
a.modallink:visited {
	font-family: sans-serif;
	font-size:1rem;
	font-weight: bold;
	color: #7B64FF;
	text-decoration: none;
}
a.modallink:hover {
	font-family: sans-serif;
	font-size:1rem;
	font-weight: bold;
	color: #FF0000;
	text-decoration: underline;
}


@media only screen and (max-width: 600px){
	.modal_ojp_logo{
		margin-left: 40%;
		height: 70px;
		width: 70px;
	}
	.modal, .modal-guts{
		height: 550px;
		max-height: 100%;
		width: 95%;
	}
	.myModal, .modal fade{
		height: 550px;
		max-height: 100%;
		width: 100%;
	}
	.myModal.modal.fade{
		height: 550px;
		max-height: 100%;
		width: 100%;
	}
	.modal-guts h1, .modal-guts h2{
		font-size: .8rem;
	}
	.modal-guts p{
		text-align: justify;
	}
	
	.modallink{
	font-size:1rem;
}
a.modallink:link {
	font-family: sans-serif;
	font-size:1.5rem !important;
	font-weight: bold;
	color: #2159AD;
	text-decoration: none;
}
a.modallink:visited {
	font-family: sans-serif;
	font-size:1.5rem !important;
	font-weight: bold;
	color: #7B64FF;
	text-decoration: none;
}
a.modallink:hover {
	font-family: sans-serif;
	font-size:1.5rem !important;
	font-weight: bold;
	color: #FF0000;
	text-decoration: underline;
}
}