@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900,300);

html {
font-family: 'Source Sans Pro', sans-serif;
	max-width: 736px;
}

img {
max-width: 100%;
}

.container {
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
  width: 70%;
  max-width: 730px;
  margin: 0 auto;
	float: left;
	padding-right: 20px;

}

.wrapper {
  display: inline-block;
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1000px;
}
.wrapper > img {
  display: block;
}

.icon {
  position: absolute;
  border-radius: 50%;
}

/*Quadrant A*/
.icon:nth-of-type(1) {
  top: 24%;
  left: 25%;
}
.icon:nth-of-type(2) {
  top: 43%;
  left: 10%;
}
.icon:nth-of-type(3) {
  top: 27%;
  left: 42%;
}
/*Quadrant B*/
.icon:nth-of-type(4) {
  top: 10%;
  right: 16%;
}
.icon:nth-of-type(5) {
  top: 21%;
  right: 32%;
}
.icon:nth-of-type(6) {
  top: 36%;
  right: 40%;
}
.icon:nth-of-type(7) {
  top: 40%;
  right: 15%;
}
/*Quadrant C*/
.icon:nth-of-type(8) {
  bottom: 35%;
  right: 42%;
}
.icon:nth-of-type(9) {
  bottom: 33%;
  right: 10%;
}
.icon:nth-of-type(10) {
  bottom: 18%;
  right: 16%;
}
/*Quadrant D*/
.icon:nth-of-type(11) {
  bottom: 36%;
  left: 40%;
}
.icon:nth-of-type(12) {
  bottom: 33%;
  left: 16%;
}
.icon:nth-of-type(13) {
  bottom: 15%;
  left: 19%;
}
.icon:nth-of-type(14) {
  bottom: 5%;
  left: 45%;
}





.list {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
	font-size: 16px;
}

.list span{
	font-weight: 900;
}


ul {
 list-style: none;
}

.qa {
	color:#ed1b52;
}

.qb {
	color:#c19a2b;
}

.qc{
	color: #a7216a;
}

.qd {
	color: #17a1b1;
}




.icon p {
	width: 120px;
	font-weight: 900;
	font-size: 18px;
	background: rgba(255, 255, 255, 0.75);
	padding:5px;
	position: absolute;
	margin-top: -2px;
	z-index: 10;	
}

 
    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {
			
			.container {
			float: none;
			padding-right: 2px;
			width:100%;
			}
			
			.icon img {
			width:30px;
			}
			
			ul{
			margin-left: 0;
			padding-left: 0;
			}
	
    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {
        
    }


.source {
	font-family: serif;
	color:#606060;
	font-size: 14px;
}

.trib {
	font-family: serif;
	font-style: italic;
	font-size: 14px;
	color: #333;
	text-align: right;
	margin-top:-30px;
}
