body {
	font-family: 'Source Sans Pro', sans-serif !important;
	margin: 0 !important;
}

.horizontal-line{
height: 0;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
	
	  margin-top: 5px;
  margin-bottom: 2px;
  border: 0;
  border-top: 1px solid #eee;
}
.horizontal-line-bottom{
  height: 0;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  margin-top: -34px;
  position: relative;
  top: -42px;
  margin-bottom: 2px;
  border: 0;
  border-top: 1px solid #eee;
}


.axis path,
.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}

.e path {
	-ms-transform: translateY(25px) rotate(90deg) !important;
	-webkit-transform: translateY(25px) rotate(90deg) !important;
	transform: translateY(25px) rotate(90deg) !important;
}

text {
	font-size: 10px;
}

.e path,
.w path {
	fill: #00ADFF !important;
}

.brush .extent {
	stroke: #fff;
	fill-opacity: 0.3 !important;
	shape-rendering: crispEdges;
	fill: #d82c31 !important;
}

.axis {
	z-index: 9999 !important;
}

.pointer {
	font-size: 14px;
	color: black;
}

.line {
	stroke: #464646;
	fill: none;
	stroke-width: 0.5px;
}

.line.line0 {
	stroke: #d82c31;
	stroke-width: 5px;
}

.line.line1 {
	stroke: #1c5485;
	stroke-width: 5px;
}

.line.line2 {
	stroke: #c4c4c4;
	stroke-width: 5px;
}

.popup_circle {
	stroke: #c4c4c4;
	stroke-width: 5px;
	fill: #ffffff;
}

.overlay {
	fill: none;
	pointer-events: all;
}

/* ---------- BOXES   ---------------- */


.pez_noteA{
	
	    display: block;
    text-align: center;
    width: 72px;
    height: auto;
    background-color: rgba(0, 0, 0, 0.41);
    color: #ffffff;
    font-size: 10px;
    position: relative;
    left: 10px;
    top: -80px;
    padding: 0 2px 0 2px;
    text-transform: uppercase;
	
}



.pez_noteB{
	
	display: block;
	background-color:  red;
	width: 93px;
	text-align: center;
	height: auto;
	background-color:rgba(0, 0, 0, 0.41);
	color: #ffffff;
	font-size: 10px;
	position: relative;

	  left: -40px;
	/*
	top: -40px;*/
	padding: 0 2px 0 2px;
	 text-transform: uppercase;
	
}

.pez_credit {
  position: relative;
  font-size: 12px;
  top: -84px;
  left: 27px;
}


.pez_legendNameA{
  position: relative;
  font-size: 10px;
  top: 31px;
  left: 27px;
  color: black;
  font-weight: 600;
  /* margin-bottom: 2px; */
  width: 68px;
  padding: 0;
  text-transform: uppercase;
}

.pez_legendNameB{
  position: relative;
  font-size: 10px;
  top: 31px;
  left: 27px;
  color: black;
  font-weight: 600;
  /* margin-bottom: 2px; */
  width: 68px;
  padding: 0;
  text-transform: uppercase;
}

.pez_lengendA {
    position: relative;
  font-size: 9px;
  top: 30px;
  left: 27px;
  color: white;
  font-weight: 600;
  height: 2px;
  margin-bottom: 2px;
  display: block;
  background-color: rgb(216, 44, 49);
  width: 48px;
  padding: 1px 0 2px 6px;
  text-transform: uppercase;
}


.pez_lengendB {
  position: relative;
  font-size: 9px;
  top: 30px;
  left: 27px;
  color: white;
  font-weight: 600;
	height: 1px;
  margin-bottom: 10px;
  display: block;
  background-color: rgb(28, 84, 133);
  width: 48px;
  padding: 1px 0 2px 6px;
  text-transform: uppercase;
}


.pez_legend {
     position: relative;
  font-size: 10px;
  top: -182px;
  left: 27px;
  color: white;
  font-weight: 600;
  margin-bottom: 40px;
  display: block;
  background-color: black;
  width: 248px;
  padding: 1px 0 1px 6px;
  text-transform: uppercase;

}
.pez_contentHolder{
	width : 620px;
}

/* -----   */

.pez_instruction img {
  width: 280px;
  position: relative;
  top: 90px;
	
	cursor: pointer;


}

.pez_boxText{
   top: -374px  ;
    padding: 0px 14px 14px 14px;
}
.pez_closeText{
        top: 8px;   
}

.pez_close{
	position: relative;
    display: block;
    top: 12px;
    left: 285px;
    width: 30px;
        cursor: pointer;
  height: 30px;
  background-image: url('../images/closebtn.png');
	
}

/*------  */
.pez_headline{
	
	font-size:28px; 
	font-weight: 800;
}
.pez_subhead{
	
	font-size:18px; font-weight: 500; line-height:0; margin-bottom: 12px;
}

.pez_para {
   text-align: left;
  font-weight: 300;
  margin: 3px;
  font-size: 14px;
}

.pez_head{
    font-weight: 600;
  font-size: 16px;
	  text-align: left;
	  margin: 2px 10px 2px 5px;
 
}


.pez-logo{
	position: absolute;
  float: right;
  right: 5px;
  top:3px;

}


.pez_eventImg{
	
	
}

.pez_box {
	  display: none;
  position: absolute;
  width: 127px !important;
  height: auto !important;
  background-color: white !important;
  border-radius: 9px;
  /* border: 2px solid #000000; */
       padding: 6px 13px 10px 13px;
  color: black;
  text-align: center;
  font-weight: bold;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.81);
  -moz-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.81);
  box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.81);
}

.pez_boxBig {
  z-index: 9999;
    display: none;
    position: absolute;
    top: 82px;
    left: 146px;
    text-align: center;
    width: 311px;
    height: auto;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 6px;
    /* border: 2px solid #000000; */
    padding: 0px 7px 7px 7px;
    color: black;
    font-weight: bold;
    margin: auto;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.81);
    -moz-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.81);
    box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.81);
}


.pez_popupContainer{
	
	text-align: center;
}


#pez_container {
	width: 620px;
	height: 500px;
	position: relative;
  top: -38px;
}

}

.pez_btn {
  display: inline-block;
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 9;
  -moz-border-radius: 9;
  border-radius: 4px;
  font-family: Arial;
  color: #ffffff;
  font-size: 17px;
  width: 32px;
  padding: 4px;
  text-decoration: none;
  top: -150px;
  
  position: relative;
  margin: 0px;
  cursor: pointer;
}

.pez_btn:hover {
	background: #3cb0fd;
	background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
	background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
	text-decoration: none;
}

.pez_textbox{
	
	width: 221px;
  text-align: center;
  margin: auto;
}

.pez_subheadB {
    font-size: 14px;
}


.pez_instruction {
	  /* z-index: 9999; */
  position: absolute;
  top: 51px;
  display: block;

  /* width: 620px; */
  left: 0;
  /* height: 568px; */
  /* background-color: rgba(0, 0, 0, 0.47); */
  color: white;
  text-align: center;
  font-weight: bold;
	 width: 100%;
}

.pez_instructioncopy {
	 width: 100%;
  color: white;
  font-size: 17px;
  position: relative;
  top: -157px;
  text-align: center;
  font-weight: 600;
 
}


/* -----------------------------------*/

.popup_blackdot{
	
	fill: #696969;
	
}

.focusA rect.y0 {
	stroke: black;
	fill: red;
	z-index: 10;
	stroke-width: 2px;
}

.focusA foreignObject.y0,
.focusA foreignObject.y1,
.focusC foreignObject.y2 {
	font-weight: bold;
	color: #ffffff;
}

.focusB rect.y1 {
	stroke: black;
	fill: blue;
	z-index: 10;
	stroke-width: 2px;
}

.focusC rect.y2 {
	stroke: black;
	fill: #5d5d5d;
	z-index: 10;
	stroke-width: 2px;
}


.msgBox {
	color: #000000;
	font-size: 13px;
	font-weight: bold;
	text-align: left;
}


.resize path {
	fill: #666;
	fill-opacity: .8;
	stroke: #000;
	stroke-width: 1.5px;
}

.redcircle,
.greenText,
.redText,
.bluecircle,
.popup_circle,
.blueText {
	cursor: pointer;

}

.grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
}
.grid path {
      stroke-width: 0;
}


.dot {
	stroke-width: 1.5px;
}

.dot-selected {
	fill: #B0C4DE;
	stroke: #B0C4DE;
	stroke-width: 1.5px;
}

.animated-circle {
	background-color: #2693FF;
	border-radius: 75px 75px 75px 75px;
	height: 150px;
	margin: 100px auto auto;
	width: 150px;
	transition: transform .2s ease-in-out, opacity .2s ease-in-out;
}

.stateOne {
	opacity: 1;
	transform: scale(1, 1);
}

.stateTwo {
	opacity: .5;
	transform: scale(1.9, 1.9);
}




@media only screen and (max-width: 558px) {
	.pez_instruction {
		width: 100%;
		 top: 21px;
	}
	#pez_container {
		position: relative;
		
		width: 100% ;
		height: 500px;
	}
	
	.pez_legend {

		left: 4px;
	}
	
	.pez_instructioncopy {

		padding: 2px;
	}
	.pez-logo {

		width: 77px;
		  top: 0px;
		  right: 0px;
	}
	
	.pez_headline{
		  font-size: 17px;
		
	}
	.pez_subhead{
	
		font-size:13px;
	}
	.pez_eventImg {
	  width: 249px;
	}
	
	.pez_close {

		    left: 224px;
	
	}
	
    

    
	.pez_boxBig {
	  width: 200px;
	       top: 122px;
    left: 15%;
	  width: 250px;
		  margin: auto;

	}

}


@media only screen and (max-width: 320px) {
    
        
	.pez_boxBig {
	  width: 200px;
	   top: 82px;
        left:6%;
	   width: 250px;
		  margin: auto;

	}
    	.pez-logo {

		width: 77px;
		  top: 92px;
		  right: 0px;
	}
}