/* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 3; /* Sit on top */
	left: 0;
	top: 0;
	margin-top:0;
	width: 100vw; /* Full width */
	height: 100%; /* Full height */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	-webkit-animation-name: fadeIn;
	-webkit-animation-duration: 0.6s;
	animation-name: fadeIn;
	animation-duration: 0.6s;
  }
  
  .modal2{
	/* display: none; */
	position: fixed;
	z-index: 1;
	left: 19%;
	top: 0%;
	margin: auto;
  }
  
  .modalClose{
	display:inline-block;
	float: right;
	margin-top:-5px;
	border-radius: 8px;
	font-size: 20px;
  }
  .modalClose::after{
	clear:both;
  }
  
  .endheader{
	color: white;
  }


  .footmob	{
	padding-bottom:12px;
	margin-bottom:0px;
  }  
  
  footer a{
	text-decoration:none;
	color:white;
  }
  
  /* Modal Content/Box */
  .modal-content {
	background-color: #fefefe;
	margin: 130px auto; /* 15% from the top and centered */
	padding: 20px;
	border: 1px solid #888;
	width: 60%; /* Could be more or less, depending on screen size */
	overflow: auto;
  }
  
  #modalDisclaimer .modal-content {
	margin: 3em auto;
	max-height: 80vh;
  }
  
  #modalPopUp .modal-content{
	margin-top: 20%;
  }
  
  #modalPopUp .close{
	margin-top:-20px;
  }
  
  #modalInstructions .close{
	margin-top:-40px;
  }
  
  .info-modal{
	padding-top: 20%;
  }
  
  .disclaimer{
	padding:0;
	margin:0;
  }
  
  /* The Close Button */
  .close {
	margin-top:-20px;
	margin-right:-15px;
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
  }
  
  .pageTitle{
	padding-bottom:15px;
  }
  
  .reportPageTitle{
	margin-left: inherit;
	text-align: center;
  }
  
  #reportingForm{
	display:block;
	width:80%;
	min-height:400px;
	margin:0 auto 10px;
  }
  
  .tab{
	display:none;
	margin:1em auto;
  }
  
  #reportingResults{
	display:none;
  }
  .act{
	display:none;
  }
  
  #compTab{
	display:none;
  }
  .checkbox{
	margin:.5em 1%;
	width:47%;
	display:inline-block;
  }
  
  .reportContainer {
	width: 75%;
	height: auto;
	min-height: 85vh;
	position: relative;
	margin: auto;
	background-color:lightgray;
	border-radius:10px;
  }
  
  .result {
	position: relative;
	top: 325px;
  }
  
  .resultimage {
	margin-left: 15%;
  }
  
  dl,dt,dd { 
	margin-left: 15%;
  } 
  
  #tab {
	padding: 0 150px;
  }
  
  .instruction {
	padding: 1em 15% 0;
  }
  
  .questionmark{
	display: inline;
	width: .6em;
	height: .6em;
  }
  
  .buttonFrame{
	padding-top:15px;
	width:100%;
	text-align:center
  }
  
  button{
	background-color: #0076d0;
	border: 1px solid #000;
	border-radius:10px;
	color: white;
	padding: .5em;
	margin: 10px auto;
	text-align: center;
	display: block;
	font-size: 16px;
  }
  
  .reportButton{
	border-radius: 8px;
	font-size: 20px;
	padding: 15px 40px;
  }
  
  .instructionsButton{
	border-radius: 8px;
	font-size: 15px;
	padding: 15px 40px;
  }
  
  
  .navButton{
	display: inline-block;
	margin: 10px 9.5%;
	width: 30%;
	border-radius: 6px;
  }
  
  .navButtons{
	display: block;
	width: 100%;
  }
  
  #userResults{
	width: 80%;
	margin: auto;
  }
  #userResults2{
	width: 80%;
	margin: auto;
  }
  
  .modal2-header {
	padding: 4px 12px;
	background-color: #0076d0;
	color: white;
  }
  
  .modal2-body {
	padding: 4px 12px;
  }
  
  .modal2-footer {
	padding: 4px 12px;
	background-color: #0076d0;
	color: white;
  }
  
  .modalActivities2 {
	position: fixed;
	bottom: 0;
	background-color: #fefefe;
	width: 100%;
	-webkit-animation-name: slideIn;
	-webkit-animation-duration: 0.6s;
	animation-name: slideIn;
	animation-duration: 0.6s
  }
  
  .mdcontact {
	position: relative;
	background-color: #f2f2f2;
	margin: auto;
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.7s;
	animation-name: animatetop;
	animation-duration: 0.7s;
	border-radius: 5px;
  }
  
  .hide {
	display: none;
  }
  
  input[type=text], select, textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	margin-top: 6px;
	margin-bottom: 16px;
	resize: vertical;
  }
  
  textarea{
	height:200px;
  }
  
  input[type=submit] {
	background-color: #0076d0;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
  }
  
  input[type=submit]:hover {
	background-color:white;
	color: #0076d0;
  }
  
  @-webkit-keyframes animatetop {
	from {top:-300px; opacity:0}
	to {top:0; opacity:1}
  }
  
  @keyframes animatetop {
	from {top:-300px; opacity:0}
	to {top:0; opacity:1}
  }
  
  @-webkit-keyframes slideIn {
	from {bottom: -300px; opacity: 0}
	to {bottom: 0; opacity: 1}
  }
  
  @keyframes slideIn {
	from {bottom: -300px; opacity: 0}
	to {bottom: 0; opacity: 1}
  }
  
  @-webkit-keyframes fadeIn {
	from {opacity: 0}
	to {opacity: 1}
  }
  
  @keyframes fadeIn {
	from {opacity: 0}
	to {opacity: 1}
  }
  
  /*media for print option*/
  
  @media print {
	nav {display:none;}
	header {display:none;}
	footer {display:none;}
	button {display:none !important;}
	.result {display:none;}
	img {display:none;}
	p {display:none;}
	h1, h2, h3, h4, h5, dl, dt, dd, ul, li, ol, th, td, blockquote, form, fieldset, legend, div,body { -webkit-print-color-adjust:exact; }
  }
  
  @media only screen and (max-width: 1024px) {
	.modal-content {
	  margin: 90px 18% auto; /* 15% from the top and centered */
	}
	  
	p{
	  font-size: 15px; 
	}
	
	h2{
	  font-size: 23px;	
	}
	
	h3{
	  font-size: 15px;
	}
	
	#tab{
	  padding: 0 4em;
	}
	
	.mobile1 {
	  font-size: 15px;
	  margin: auto; 
	}
	
	.modal2-header {
	  width: 98%;
	}
	
	.modal2-body {
	  width: 98%; 
	}
	
	.modal2-footer {
	  width: 98%;
	}
	
	.close {
	  margin-right: -10px;
	}
	
	input[type=text].mobile2 {
	  width: 80%;
	}
	
	input[type=text], select, textarea {
	  width: 99%;
	}
	
	.footmob	{
	  margin: 15px auto;
	}
  }  
  
  @media only screen and (max-width: 768px) {
	.modal-content {
	  background-color: #fefefe;
	  margin: 9em auto; /* 15% from the top and centered */
	  padding: 20px;
	  border: 1px solid #888;
	  width: 60%; /* Could be more or less, depending on screen size */
	  max-height: 80%;
	  overflow: auto;
	}
	  
	#tab{
	  padding: 0 2em;
	}
	
	.reportButton{
	  border-radius: 8px;
	  font-size: 17px;
	  padding: 7px 20px;
	}
	
	.modal2-body {
	  width: 98%; 
	}
	
	.modal2-footer {
	width: 98%;
	}
	  
	input[type=text].mobile2 {
	  width: 80%;
	}
	  
	.checkbox {
	  font-size: 15px;
	  height:1.5em;
	}
	
	.footmob	{
	  margin: 15px auto;
	}
  }
  
  @media only screen and (max-width: 540px) {
	.modal-content {
	  width: 75%; /* Could be more or less, depending on screen size */
	}
	
	.modalDisclaimer .modalContent{
	  margin: auto;
	}
	
	.modalClose{
	  margin-top: 10px;
	}
	
	.resultimage{
	  width: 75%;
	  height: 75%;
	}
	
	.instructionsButton{
	  border-radius: 8px;
	  font-size: 14px;
	  padding: 7px 20px;
	}
  
	.checkbox {
	  width:95%;
	}
  }
  
  @media only screen and (max-width: 414px) {
	.navButton {
	  font-size: 14px;
	}
	
	.reportButton{
	  font-size: 13px;
	}
	
	.instructionsButton{
	  border-radius: 8px;
	  font-size: 10px;
	  padding: 7px 20px;
	}
	
	.modalClose{
	  font-size: 14px;
	}
	  
	#tab{
	  padding: 0;
	}
	
	input[type=text].mobile2 {
	  width: 50%;
	}
	
	input[type=text], select, textarea {
	  width: 77%;
	}
	.formcontact input, .formcontact textarea{
	  width: 95%;
	}
	
	dt,dd,dl {
	  font-size: 10px;
	}
   }
  
  @media only screen and (max-width: 375px) {
	.navButton {
	  /* font-size: 13px; */
	}
	
	.modalClose {
	  font-size: 12px;
	}
	
	.reportButton {
	  border-radius: 8px;
	  font-size: 13px;
	  padding: 7px 20px;
	}
	
	h2{
	  font-size: 20px; 
	}
	  
	.resultimage{
	  width: 75%;
	  height: 75%;
	}
	  
	.modal2-header {
	  width: 95%;
	}
	
	.modal2-body {
	  width: 95%; 
	}
	
	.modal2-footer {
	  width: 95%;
	}
	 
	input[type=text].mobile2 {
	  width: 50%;
	}
	
	/* input[type=text], select, textarea { */
	  /* width: 70%; */
	/* } */
	
	.footmob	{
	  margin: 15px auto;
	}
	
	dt,dd,dl {
	  font-size: 10px;
	}
  }	  
  
  @media only screen and (max-width: 360px) {
	.navButton {
	  font-size: 12px;
	}
	
	.modalClose{
	  font-size: 12px;
	}
	
	.resultimage{
	  width: 75%;
	  height: 75%;
	}
	
	/* #tab { */
	  /* padding: 0 30px; */
	/* } */
	
	/* .mobile1 { */
	  /* padding-right: 35%; */
	/* } */
	
	.modal2-body {
	  width: 95%; 
	}
	
	.modal2-footer {
	  width: 95%;
	}
	
	input[type=text].mobile2 {
	  width: 50%;
	}
	
	textarea {
	  height: 6em;
	}
	
	.reportButton {
	  border-radius: 8px;
	  font-size: 13px;
	  padding: 7px 20px;
	}
	
	.instructionsButton{
	  border-radius: 8px;
	  font-size: 10px;
	  padding: 7px 20px;
	}
	
	.aboutButton{
	  width: 100px;
	  font-size: 7px; 
	  top: 33%;
	  left: 50%;
	}
	
	.contactButton{
	  width: 110px;
	  font-size: 6px; 
	  top: 33%;
	  left: 80%;
	}
	
	.footmob{
	  margin: 15px auto;
	}
	
	dt,dd,dl {
	  font-size: 10px;
	}
  }
  
  @media only screen and (max-width: 320px) {
	button {
	  font-size: 10px;
	}
	
	.navButton {
	  width: 50px;
	  font-size: 10px;
	  margin: 10px 11%; 
	}
	  
	/* .mobile1 { */
	  /* padding-right: 40%; */
	/* } */
	
	.modal2-header {
	  width: 92.5%;
	}
	
	.modal2-body {
	  width: 92.5%; 
	}
	
	.modal2-footer {
	  width: 92.5%;
	}
	  
	input[type=text].mobile2 {
	  width: 40%;
	}
	
	/* input[type=text], select, textarea { */
	  /* width: 95%; */
	/* }    */
  }