body {
  background-color: #F0F0F0;
  /*color: #636e7b;*/
  width: 100%;
  margin: 0;
  padding: 0;
}

.white {
  background-color: #ffffff;
}


.diagram {
  position: relative;
}

.diagram__image {
  width: 100%;
}

.diagram__hotspot {
	position: absolute;
	background-color: #009dc8;
	opacity: 0;
	border-radius: 0% 0%;
	text-align: center;
	font-size: 25px;
	z-index: 1;
	top: 547px;
}

a:hover .diagram__hotspot {
    background-color: #009dc8;
	opacity: 0.1;
	color: white;
}


/*#hotspot1 {
  left: 55%;
  top: 35%;
  height: 35px;
  width: 75px;
}
#hotspot2 {
  left: 35%;
  top: 60%;
  height: 35px;
  width: 75px;
}
#hotspot3 {
  left: 75%;
  top: 30%;
  height: 35px;
  width: 75px;
}
#hotspot4 {
  left: 15%;
  top: 40%;
  height: 35px;
  width: 75px;
}*/


.grid {}

@media only screen and (min-width: 600px) {
  .grid__col {
    float: left;
  }
  .grid__col {
    width: 100%;
  }
}