@keyframes borderchange {
	0% {background-color: rgba(240,240,240,0.9);}
	50% {background-color: rgba(240,240,240,0.5);}
    100% {background-color: rgba(240,240,240,0.9);}
}

body {
	color:  #000099;
	line-height: 1.2em;
	font-size:x-large;
	margin: 0;
	font-family: Verdana,Arial, Helvetica, sans-serif;
}

body > div {
	position: relative; 
	max-width: 1240px; 
	margin:auto; 
	margin-bottom:20px; 
	padding:20px;
	background-image: url("images/wallpaper3.JPG");

}

a.hotspot {
  width:30px;
 height:30px;
 border-color :#5c5529;
 border-radius:20px;
 border-width:thick;
 position:absolute;
 border-style:solid;
 margin-left:-15px;
 margin-top:-15px;
 animation-name: borderchange;
 animation-duration: 4s;
 animation-iteration-count: infinite; 
}

a.hotspot:hover {
	border-color: #B0A54F;
	transition: 500ms linear;
}

a {
	text-decoration:none;
	color: #CC0000; 
}

a::before {
	content:">";
	font-weight:bold;
}

a.hotspot::before {
	content:none;
}

div.content {
    padding-bottom: 2em;
    padding-left: 3%;
    padding-right: 3%;
}

div.flex {
	display:flex;
	flex-direction: row; 
	flex-wrap: wrap ; 
	justify-content: space-between;
	align-items: center ;
}

div.flex > div {
	padding-bottom: 1em; 
    width:48%;	
}

@media (max-width: 1000px) {
  div.flex > div {
    width: 100%;
  }
}

div > img {
	width: 100%;
}

div.bordered {
    border: 1px #000099 solid;
}

h1 {
  font-size: xx-large;
}

footer {
	font-size:large;
}

footer.small {
	font-size:x-small	
}