p { margin:0; }

			h1 {
		    font-family: "Guardian Egyptian Web",Georgia,serif;
		    font-size: 32px;
		    font-weight: normal;
		    color: black;
		    line-height: 38px;
			}

			h2 {
		    font-family: "Guardian Egyptian Web",Georgia,serif;
		    font-size: 1.2rem;
		    font-weight: normal;
		    color: black;
		    font-weight:900;
			}

			.chartTitle {
				color: #333333;
			}

			.subTitle {
				font-weight: normal;
				color: #767676;
			}

			.summaryText {
			    color: #767676;
			    font-family:'Guardian Text Sans Web', 'Agate Sans', sans-serif;
			    font-size: 1rem;
			}

			#loading {
				font-family: "Guardian Egyptian Web",Georgia,serif;
				font-size:1.1rem;
				color:#000;
			}

		
			.btns-share .btn-tt {
    		background: #bdbdbd url(../img/twitterIcon.svg) no-repeat center center;
			}
			.btns-share .btn-tt:hover {
				background-color: #03b3ee;
			}
		
			.btns-share .btn-fb {
    			background: #bdbdbd url(../img/facebookIcon.svg) no-repeat center center;
			}

			.btns-share .btn-fb:hover {
			    background-color: #3067a3;
			}
			.btns-share button {
			    color: #fff;
			    width: 32px;
			    height: 32px;
			    border: none;
			    border-radius: 9000px;
			    display: inline-block;
			    vertical-align: top;
			    cursor: pointer;
			    outline: none;
			    -webkit-appearance: button;
			    text-transform: none;
			    overflow: visible;
			    -webkit-font-smoothing: antialiased;
			    margin: 0;
			}

			#outer-wrapper{
				max-width: 1300px;
				position: relative;

			}

			.mapContainer {
				display: inline-block;
				text-align:left;
			}

			.mapContainer .yearHeader {
				margin-bottom:5px;
			}
			
			.keyText {
				font-size:0.8rem;
			}

			#graphicContainer {
				margin-bottom:5px;
			}

			.graphicInner {
				margin-right: auto;
				margin-left: auto;
				text-align: center;
				width:98%;
			}

			.container1 {
				margin-right:1%;
			}

			.container2 {
				margin-right:1%;
			}

			.country {
				fill:#EFEFEF;
				fill-opacity: 1;
				stroke: #bfbfbf;
				stroke-width:1px;

			}

			.reef {
				fill:#000;
				fill-opacity: 1;
			/*	stroke:#000;*/
			}

			.greyedOut {
			background-color: #bdbdbd !important;
			}

			.brush .extent {
			  stroke: #fff;
			  fill-opacity: .125;
			  shape-rendering: crispEdges;
			}

			.graticule {
				fill: none;
				stroke: #efefef;
				stroke-width: .5px;
				stroke-opacity:1;
			}


			.circle {
				fill-opacity:0.6;
				stroke-opacity:0.6;
				cursor:default;
			}

			#controls {
				text-align:left;
				width: 100%;
			}

			.keyDiv {
				display: inline-block;
				margin-left:10px;
			}

			.keyDiv .keyCircle:first-of-type {
			    margin-left:0;
			}

			#controls .keyText {
				margin-left:5px;

			}

			#controls {
				display: table;
				margin-left:1%;
			}

			.dotYearKey {
				display:table-cell;
				width:66%;
			/*	float:left;*/
			}

			.key2016 {
				display:table-cell;
				width:34%;
				
			/*	float:left;*/
	
			}

			.dotYearKeyBorder {
				border-bottom: 1px grey solid;
				width:65%;
				margin-left:1%;
				float:left;
			}

			.key2016Border {
				width:32%;
				margin-left:1.1%;
				border-bottom: 1px grey solid;
				float:left;
			}

			.dotYearKey .keyCircle {
				border-radius: 50%;
				display: inline-block;
			}
			
			.key2016 .keySquare {
				display: inline-block;
				width:12px;
				height:12px;				
			}

			.key2016 .keySquare:first-of-type {
			    margin-left:0;
			}

			

			.keyCircle {
				stroke-width:.5px;
				stroke:grey;
			}
			.dot:hover {

      		stroke: #000;
      		stroke-width:1px;
   			
   			}

   			#mapKey {
   				position: absolute;
   				right:0;
   				bottom:50px;
   				background-color:rgba(255, 255, 255, 0.5);
   				color:#767676;
   				text-align: right;
   				pointer-events:none;
   			}

			#mapContainer {
				position: relative; 
				width:100%;
			}


			.caption {
			font-family: "Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
			color: #767676;
			font-size:0.75em;
			margin-left:auto;
			margin-right:auto; 
			}

			@media (min-width: 980px) {
				h1 {
				font-size: 48px;
    			line-height: 54px;
				}
			}

			@media (max-width: 660px) {

			.keyDiv {
				display: block;
			}

			.keyText {
				font-size:0.6rem;
			}
			.key2016 .keySquare {
				width:8px;
				height:8px;
				
			}


			}