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;
			}

			.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;
			}

			.innerWrapper {
				margin-left:5px;
				margin-right:5px;
				height:640px;
			}

			.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: 640px;
				position: relative;
			}

			
			.keyText {
				font-size:0.8rem;
			}

			#graphicContainer {
				margin-bottom:5px;
				position: relative;
			}


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

			}

			#time-text {
				position: absolute;
				bottom:50px;
				left:80%;
				color:#000;
				font-size:1.3rem;
			}

			#day {
				color:#767676;
				font-size:1rem;
			}

			.keyText {
				font-size:0.8rem;
			}

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

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

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

			.key { 
				line-height:15px;
			}

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

			.mag4 {
			  background-color: #fecc5c;
			}

			.mag5 {
			   background-color: #fd8d3c;
			}

			.mag6 {
			  background-color: #f03b20;
			}

			.mag7 {
			  background-color:#bd0026;
			}


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

			.reef {
			  background-color: #000;
			}

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

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


			.circle {
				stroke-opacity:.5;
				stroke:grey;
				cursor:default;
			}

			.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 (min-width: 660px) {
			h1 {
   				 padding-top: 30px;
			}	
			}