/* EAP Wheel Desktop version */

@media screen and (min-width: 999px) {
	.eap-intro-mobile {
		display: none;
	}
	
	.eap-circle {
		margin: 25px 0 30px 24px;
	}
	
	.mobile-link {
	      display: none;
	}

	#map {
		margin: 0 auto;
		padding:0;
		width:866px;
		height:866px;
		background: url(/sr/doms/eap/PublishingImages/eap-circle.jpg) top left no-repeat;
		/*font-family:arial, helvetica, sans-serif;*/
		font-size:8pt;
		position:relative;
	}
	
	#map li {
		margin:0;
		padding:0;
		list-style:none;
	}
	
	/* Map center links hotspot*/
	#map li a.services, #map a.workshops, #map a.consultants, #map a.employee_brochure, #map a.supervisor_brochure, #map a.harassment, #map a.faqs, #map a.contact {
		position:absolute;
		display:block;
	}
	
	#map a.services {
		top: 239px;
		left: 325px;
		width: 237px;
		height: 60px;
	}
	
	#map a.workshops {
		top: 317px;
		left: 286px;
		width: 323px;
		height: 35px;
	}
	
	#map a.consultants {
		top: 370px;
		left: 286px;
		width: 323px;
		height: 35px;
	}
	
	#map a.employee_brochure {
		top: 416px;
		left: 312px;
		width: 273px;
		height: 32px;
	}
	
	#map a.supervisor_brochure {
		top: 463px;
		left: 305px;
		width: 273px;
		height: 32px;
	}
	
	#map a.supervisor_brochure {
		top: 463px;
		left: 305px;
		width: 282px;
		height: 32px;
	}
	
	#map a.harassment {
		top: 511px;
		left: 274px;
		width: 344px;
		height: 32px;
	}
	
	#map a.faqs {
		top: 557px;
		left: 392px;
		width: 100px;
		height: 32px;
	}
	
	#map a.contact {
		top: 602px;
		left: 367px;
		width: 156px;
		height: 32px;
	}
	
	

	
	/* ------ Map wheel icons hotspot ----- */

	#map a:hover {
		text-decoration:none !Important;
	}
				
	#map li a div { 
		display:none;
   }
	
	
	#map li a:hover div {
		display: block;
		color: white;
		border: 4px solid #50b5ce;
        background: #0f7691;
   		border-radius: 50%;
		background-repeat: no-repeat;
		box-sizing: border-box;
		padding: 60px 70px 82px 80px;
		font-family: 'ZCOOL XiaoWei', 'Droid Sans', sans-serif !important;     	
		text-align: center;
	}
	
	#map li a:hover div span {
		font-size: 24px;
		font-weight: bold;
		text-align: center;
		text-decoration: none;
		line-height: 22px !important;
	}
	
	#map li a:hover div p {
		color: white !important;
		text-align: center !important;
      	line-height: 25px !important;
		font-family: 'ZCOOL XiaoWei', 'Droid Sans', sans-serif !important;
     	font-size: 21px;
     	margin-top: 19px !important;
	}
	
	#map li a.parenting, #map li a.caregiving, #map li a.aging, #map li a.stress, #map li a.relocation, #map li a.life, #map li a.addiction, #map li a.grief, #map li a.suicide, #map li a.workplace, #map li a.incident, #map li a.behavioral, #map li a.balance, #map li a.love, #map li a.peer, #map li a.growth, #map li a.resources, #map li a.depression, #map li a.family, #map li a.anxiety {
		position:absolute;
		display:block;
	}

	
	/* START customed code for each icon - clockwise */
  
  
	/* -- 1 -- */
	#map a.parenting {
		border-radius: 50%;
		width: 86px;
		height: 87px;
		top: 84px;
		left: 238px;
	}
		
	#map li a.parenting:hover div {
		position: relative;
		width: 508px;
		height: 508px;
		top: 91px;
		right: 53px;
		padding: 125px 70px 82px 80px;
	}
	
	
	
	/* -- 2 -- */
	#map a.caregiving {
		border-radius: 50%;
		width: 86px;
		height: 87px;
		top: 52px;
		left: 341px;		
	}	
	
	#map li a.caregiving:hover div {
		position: relative;
		width: 508px;
		height: 508px;
		top: 123px;
		right: 155px;
		padding: 100px 70px 82px 80px;
	}
	
	
	/* -- 3 -- */
	#map a.aging {
		border-radius: 50%;
		width: 86px;
		height: 87px;
		top: 51px;
		left: 446px;		
	}	
	
	#map li a.aging:hover div {
		position: relative;
		width: 508px;
		height: 508px;
		top: 124px;
		right: 259px;
		padding: 115px 70px 82px 80px;
	}
	
	
	/* -- 4 -- */
	#map a.stress {
		border-radius: 50%;
		width: 86px;
		height: 87px;
		top: 81px;
		left: 542px;		
	}	
	
	#map li a.stress:hover div {
		position: relative;
		width: 508px;
		height: 508px;
		top: 94px;
		right: 355px;
		padding: 115px 70px 82px 80px;
	}
	
	
	

    /* -- 5 -- */
	#map a.relocation {
		top: 140px;
		left: 627px;
		width :86px;
		height: 87px;
		border-radius: 50%;
	}
	
	#map li a.relocation:hover div {
		position: relative;
		width: 508px;
		height: 508px;
		right: 441px;
		top: 35px;
		padding: 105px 70px 82px 80px;
	}
	
	
	
	
	/* -- 6 -- */
	#map a.life {
		border-radius: 50%;
		width: 86px;
		height: 87px;
		top: 232px;
		left: 693px;		
	}	
	
	#map li a.life:hover div {
		position: relative;
		width: 508px;
		height: 508px;
		bottom: 57px;
		right: 506px;
		padding: 125px 70px 82px 80px;
	}
	
	
	/* -- 7 -- */
	#map a.addiction {
		border-radius: 50%;
		width: 86px;
		height: 87px;
		top: 330px;
		left: 726px;		
	}	
	
	#map li a.addiction:hover div {
		position: relative;
		width: 508px;
		height: 508px;
		bottom: 155px;
		right: 539px;	
		padding: 115px 70px 82px 80px;
	}
	
	/* -- 8 -- */
	#map a.grief {
		border-radius: 50%;
		width: 86px;
		height: 87px;
		top: 437px;
		left: 727px;		
	}	
	
	#map li a.grief:hover div {
		position: relative;
		width: 508px;
		height: 508px;
		bottom: 262px;
		right: 540px;
		padding: 125px 70px 82px 80px;
	}
	
	
	/* -- 9 -- */
	#map a.suicide {
		border-radius: 50%;
		width: 86px;
		height: 87px;
		top: 531px;
		left: 698px;		
	}	
	
	#map li a.suicide:hover div {
		position: relative;
		width: 508px;
		height: 508px;
		bottom: 356px;
		right: 511px;
		padding: 110px 70px 82px 80px;
	}
	
	
	/* -- 10 -- */
	#map a.workplace {
		border-radius: 50%;
		width: 86px;
		height: 87px;
		top: 616px;
		left: 637px;
	}	
	
	#map li a.workplace:hover div {
		position: relative;
		width: 508px;
		height: 508px;
		bottom: 441px;
		right: 450px;
		padding: 100px 70px 82px 80px;	
	}
	
	
	/* -- 11 -- */
	#map a.incident {
		border-radius: 50%;
		width: 86px;
		height: 87px;
		top: 678px;
		left: 558px;		
	}	
	
	#map li a.incident:hover div {
		position: relative;
		width: 508px;
		height: 508px;
		bottom: 503px;
		right: 371px;
		padding: 140px 70px 82px 80px;
	}
	
	/* -- 12 -- */
	#map a.behavioral {
		border-radius: 50%;
		width: 86px;
		height: 87px;
		top: 713px;
		left: 452px;		
	}	
	
	#map li a.behavioral:hover div {
		position: relative;
		width: 508px;
		height: 508px;
		bottom: 538px;
		right: 265px;
		padding: 80px 70px 82px 80px;	
	}
	
	/* -- 13 -- */
	#map a.balance {
		border-radius: 50%;
		width: 86px;
		height: 87px;
		top: 714px;
		left: 341px;		
	}	
	
	#map li a.balance:hover div {
		position: relative;
		width: 508px;
		height: 508px;
		bottom: 539px;
		right: 154px;
		padding: 120px 70px 82px 80px;
	}
	
	/* -- 14 -- */
	#map a.love {
		border-radius: 50%;
		width: 86px;
		height: 87px;
		top: 678px;
		left: 241px;		
	}	
	
	#map li a.love:hover div {
		position: relative;
		width: 508px;
		height: 508px;
		bottom: 503px;
		right: 54px;
		padding: 100px 70px 82px 80px;
	}
	
	/* -- 15 -- */
	#map a.peer {
		border-radius: 50%;
		width: 86px;
		height: 87px;
		top: 619px;
		left: 160px;		
	}	
	
	#map li a.peer:hover div {
		position: relative;
		width: 508px;
		height: 508px;
		bottom: 444px;
		left: 27px;
		padding: 95px 70px 82px 80px;
	}
	
	/* -- 16 -- */
	#map a.growth {
		border-radius: 50%;
		width: 86px;
		height: 87px;
		top: 535px;
		left: 98px;		
	}	
	
	#map li a.growth:hover div {
		position: relative;
		width: 508px;
		height: 508px;
		bottom: 360px;
		left: 89px;
		padding: 140px 70px 82px 80px;
	}
	
	/* -- 17 -- */
	#map a.resources {
		border-radius: 50%;
		width: 86px;
		height: 87px;
		top: 435px;
		left: 64px;		
	}	
	
	#map li a.resources:hover div {
		position: relative;
		width: 508px;
		height: 508px;
		bottom: 260px;
		left: 123px;
		padding: 115px 70px 82px 80px;
	}
	
	
	/* -- 18 -- */
	#map a.depression {
		border-radius: 50%;
		width: 86px;
		height: 87px;
		top: 328px;
		left: 60px;		
	}	
	
	#map li a.depression:hover div {
		position: relative;
		width: 508px;
		height: 508px;
		bottom: 153px;
		left: 126px;
		padding: 90px 70px 82px 80px;	
	}
	
	
	/* -- 19 -- */
	#map a.family {
		border-radius: 50%;
		width: 86px;
		height: 87px;
		top: 233px;
		left: 93px;		
	}	
	
	#map li a.family:hover div {
		position: relative;
		width: 508px;
		height: 508px;
		bottom: 58px;
		left: 94px;
		padding: 90px 70px 82px 80px;
	}
	
	/* -- 20 -- */
	#map a.anxiety {
		border-radius: 50%;
		width: 86px;
		height: 87px;
		top: 151px;
		left: 152px;		
	}	
	
	#map li a.anxiety:hover div {
		position: relative;
		width: 508px;
		height: 508px;
		top: 24px;
		left: 34px;
		padding: 115px 70px 82px 80px;
	}
		
}
		
		
/* EAP icons mobile */

@media screen and (max-width: 998px) {
	.eap-intro {
		display: none;
	}
	
   	#map {
		margin: 10px 0 0 0px;
		padding: 10px 30px;
		max-width: 890px;
		width: 100%;
		height: 150px;
		background: transparent;
		font-family: 'ZCOOL XiaoWei', 'Droid Sans', sans-serif !important;
		position: static;
		background-color: #e9f6fa;
		border: 1px solid #0f7691;
		display: block;
		box-sizing: border-box;
		border-radius: 12px;
	}
      
   #map li {
		margin: 0;
		padding: 0;
		list-style:none;
		width: 50%;
		float: left;
		margin: 5px 0;
		font-family: 'ZCOOL XiaoWei', 'Droid Sans', sans-serif !important;
		font-size: 19px;
	 }
      
    #map li a {
			/* display: none; */
			}
      
   #map li a.services, #map a.workshops, #map a.consultants, #map a.employee_brochure, #map a.supervisor_brochure, #map a.harassment, #map a.faqs, #map a.contact {
			
         position: static;
			display: block;
     }
   
   #map a.services, #map a.workshops, #map a.consultants, #map a.employee_brochure, #map a.supervisor_brochure, #map a.harassment, #map a.faqs, #map a.contact {
         height: auto;
         text-align: center;
         width: 100% !important;
         /*color: #39612d;*/
         line-height: 22px;
     }
     
   
   .mobile-link {
      display: block;
   }
   
	
	/* -- icons  */

	#map li a div {
			width: 100%;
			float: left;
			/* border: 1px solid #ececec; */
			padding: 100px 50px 0 50px;
			box-sizing: border-box;
			margin: 40px 0 0 -10px;
			text-align: center;
			min-height: 483px;
	}
	
	
	#map li a.parenting span, #map li a.caregiving span, #map li a.aging span, #map li a.stress span, #map li a.relocation span, #map li a.life span, #map li a.anxiety span, #map li a.depression span, #map li a.addiction span, #map li a.grief span, #map li a.suicide span, #map li a.workplace span, #map li a.incident span, #map li a.behavioral span, #map li a.peer span, #map li a.love span, #map li a.family span, #map li a.balance span, #map li a.resources span, #map li a.growth span {
			font-family: 'ZCOOL XiaoWei', 'Droid Sans', sans-serif !important;
			font-size: 22px;
			font-weight: bold;
			color: #000;
			/* margin-bottom: 20px !important; */
	}
	
	#map li a.parenting p, #map li a.caregiving p, #map li a.aging p, #map li a.stress p,  #map li a.relocation p, #map li a.life p, #map li a.anxiety p, #map li a.depression p, #map li a.addiction p, #map li a.grief p, #map li a.suicide p, #map li a.workplace p, #map li a.incident p,  #map li a.behavioral p,  #map li a.peer p,  #map li a.love p,  #map li a.family p, #map li a.balance p,  #map li a.resources p,  #map li a.growth p {
			font-family: 'ZCOOL XiaoWei', 'Droid Sans', sans-serif !important;
			font-size: 17px;
			color: #000;
			text-align: center;
			margin-bottom: 0;
			margin-top: 22px !important;
			line-height: 24px !important;
	}
	
	
	
	
	#map li a.parenting div {
			background: url(/sr/doms/eap/PublishingImages/icon-parenting.png) center top no-repeat;
	}
	
	#map li a.caregiving div {
			background: url(/sr/doms/eap/PublishingImages/icon-caregiving.png) center top no-repeat;
	}
	
	#map li a.aging div {
			background: url(/sr/doms/eap/PublishingImages/icon-aging.png) center top no-repeat;
	}
	
	#map li a.stress div {
			background: url(/sr/doms/eap/PublishingImages/icon-stress.png) center top no-repeat;
	}
	
	#map li a.relocation div {
			background: url(/sr/doms/eap/PublishingImages/icon-relocation.png) center top no-repeat;
	}
	
	#map li a.life div {
			background: url(/sr/doms/eap/PublishingImages/icon-life.png) center top no-repeat;
	}
	
	#map li a.anxiety div {
			background: url(/sr/doms/eap/PublishingImages/icon-anxiety.png) center top no-repeat;
	}
	
	#map li a.depression div {
			background: url(/sr/doms/eap/PublishingImages/icon-depression.png) center top no-repeat;
	}
	
	#map li a.addiction div {
			background: url(/sr/doms/eap/PublishingImages/icon-addiction.png) center top no-repeat;
	}
	
	#map li a.grief div {
			background: url(/sr/doms/eap/PublishingImages/icon-grief.png) center top no-repeat;
	}
	
	#map li a.suicide div {
			background: url(/sr/doms/eap/PublishingImages/icon-suicide.png) center top no-repeat;
	}

	
	#map li a.workplace div {
			background: url(/sr/doms/eap/PublishingImages/icon-workplace.png) center top no-repeat;
	}
	
	#map li a.incident div {
			background: url(/sr/doms/eap/PublishingImages/icon-incident.png) center top no-repeat;
	}
	
	#map li a.behavioral div {
			background: url(/sr/doms/eap/PublishingImages/icon-behavioral.png) center top no-repeat;
	}
	
	#map li a.peer div {
			background: url(/sr/doms/eap/PublishingImages/icon-peer.png) center top no-repeat;
	}
	
	#map li a.love div {
			background: url(/sr/doms/eap/PublishingImages/icon-love.png) center top no-repeat;
	}
	
	#map li a.family div {
			background: url(/sr/doms/eap/PublishingImages/icon-family.png) center top no-repeat;
	}
	
	#map li a.balance div {
			background: url(/sr/doms/eap/PublishingImages/icon-balance.png) center top no-repeat;
	}
	
	#map li a.resources div {
			background: url(/sr/doms/eap/PublishingImages/icon-resources.png) center top no-repeat;
	}
	
	#map li a.growth div {
			background: url(/sr/doms/eap/PublishingImages/icon-growth.png) center top no-repeat;
	}
	
   
}		

@media screen and (max-width: 774px) {

      
   #map {
	    max-width: 700px;
 	    height: 280px;
    }
	
	#map li {
		 width: 100%;
	 }
	 
	 #map li a div {
       min-height: 0;
	 }
	 
	 #map a.services, #map a.workshops, #map a.consultants, #map a.employee_brochure, #map a.supervisor_brochure, #map a.harassment, #map a.faqs, #map a.contact {
      height: auto;
      text-align: center;
      width: 100% !important;
      line-height: 22px;
    }
		
}	
		
		
@media screen and (max-width: 380px) {
	
	#map {
    margin: 10px 0 0 -5px;
    padding: 10px 30px;
    width: 96%;
	 max-width: 360px;
	 height: 300px;
    background-color: #fff;
    border: 0px solid #94b49d;
	}

	#map li a div {
    width: 100%;
    padding: 100px 1px 0 1px;
    margin: 40px 0 0 -10px;
	}	
	
	
	#map li {
    margin: 5px 0 5px 8px;
	}

}

/*EAP 
		
	
		
/* bulletin board desktop */

.bottom-link{
	display: block; 
	margin: 0 auto; 
	width: 50%; 
	text-align: center; 
	clear: both; 
	padding: 40px 0 0 0;
   font-size: 1.1em;
}

/* bulletin board mobile */

#bulletin-board-mobile {
   text-align: center;
}

.sticky-notes{
	float: left;
   margin: 0 10px 0 10px;
   width: 200px;
}


@media screen and (min-width: 999px) {
	#bulletin-board-mobile {
	    display: none;
	}
}

@media screen and (max-width: 998px) {
	#bulletin-board-desktop {
	    display: none;
	}
}

@media (min-width: 412px) and (max-width: 480px) {
	.sticky-notes{
	    width: 160px;
	}
}


@media (max-width: 411px) {
	.sticky-notes{
	    float: none;
		 width: 200px;
		 margin: 5px auto;
	}
}