body {
	background: #1a1a1a;
}

@-webkit-keyframes blackWhite {  
  0% { color: white; }
  50% { color: #b91715; }
  51% { color: #b91715; }
  100% { olor: #0f02ff; }
}

.blinkdiv {
    height: 100px;
/*    background-color: black;*/
    -webkit-animation-name: blackWhite;  
    -webkit-animation-iteration-count: infinite;  
    -webkit-animation-duration: 10s; 
}   

.main-label {
	margin-top: 5%;
	margin-bottom: 5%;
}

.resources {
	margin-left: 12%;
	margin-top: 10%;
}

.subject-header {
	margin-top: 5%;
}


p {
	color:#cccccc;
	font-family: 'Georgia', serif;
	text-align: left;
/*	margin-top: 20%;*/

}

.slogan {
	margin-left: 18%;
	margin-right: 18%;
	text-align: center;
	margin-top: 12%;
}

li {
		color:#cccccc;
	font-family: 'Georgia', serif;
	text-align: left;

}
a {
	color: white;
	text-decoration: none !important;
	border-bottom: 1px dotted #b91715;
}

a:hover{
/*	border-bottom: none !important;*/
  color: #b91715;
}
h1 {
	color: white;
	font-family: 'Georgia', serif;
	text-align: center;
/*	margin-top: 22%;*/
	font-size: 5.5rem;
	width: 100%;
}

h2 {
	color: white;
	font-family: 'Georgia', serif;
	text-align: left;
/*	margin-top: 22%;*/
	font-size: 1.7rem;
	width: 100%;
}




@media screen and (max-width: 590px){
	h1 {
		font-size: 4.4rem;
/*		margin-top: 45%;*/
	}

	h2 {
		fint-size: 1.5rem;
	}

	p {
/*		margin-top: 30%;*/
	}
}

@media screen and (max-width: 400px) {
	h1 {
		font-size: 3rem;
/*		margin-top: 70%;*/
	}

	h2 {
		font-size: 1.2rem;
	}

	p {
/*		margin-top: 25%;*/
	}

}

#crime {
	color: red;
}




* {
  box-sizing: border-box;
}

/*body {
  margin: 0;
  font-family: Arial;
}
*/
.header {
  text-align: center;
  padding: 32px;
}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }

  .main-label {
  	margin-bottom: 0%;
  }

.resources {
	margin-left: 3%;
	margin-right: 3%;
	margin-top: 10%;
}

.slogan {
	text-align: center;
	margin-top: 20%;
}


}

@media screen and (max-width: 400px) {
	.slogan {
	margin-top: 6%;
}

}