.process-map-block {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
    height: 100%;
}

.process-map-map {
    padding: 110px 20px 100px;
}

.process-map-image {
    height: 100%;
    }

.process-map-image svg {
	width: 100%;
    height: 100%;
    padding-right: 20px;
    }

.process-map-image svg a:focus,
.process-map-image svg a:hover {
    outline: 3px dotted #fff;
    }

.process-map-image .highlight-process {
    filter: invert(0%) sepia(90%) saturate(400%) hue-rotate(-20deg) brightness(90%) contrast(100%);
}

.process-map-image .highlight-process text,
.process-map-image .highlight-process ellipse,
.process-map-image .highlight-process circle {
	fill: #f57905;
	/*filter: invert(0%) sepia(80%) saturate(500%) hue-rotate(-1deg) brightness(100%) contrast(100%);*/
    filter: invert(0%) sepia(90%) saturate(400%) hue-rotate(-20deg) brightness(90%) contrast(100%);
}

.process-map-info {
 	/* width: 35%;
     height: 100%;
     margin-left: 20px; */
 	padding: 30px;
	background-color: #EFF7F3;
    border-radius: 10px;
	overflow-y: auto;
}

.process-map-info .regulations-accordion {
	/* overflow: hidden; */
	border-radius: 10px;
	margin: 0 0 20px 0;
	border: solid 1px #046a38;
    border-radius: 5px;
}

.process-map-info .regulations-accordion .regulations-title,
.process-map-info .regulations-accordion .regulations-title h3 {
	padding: 8px 25px 7px 10px;
	cursor: pointer;
	background: #fff;
	transition: background 1s linear;
	position: relative;
	color: #046a38;
    font-family: "ProximaNova-Bold";
    /*font-size: 1.25em;*/
    line-height: 1.25em;
    padding-left: 20px;
    width: 100%;
    margin-bottom: 0px;
    font-size: 1.1em;
    }

.process-map-info .regulations-accordion .regulations-title:focus {
    outline-offset: 2px;
    outline: 3px dotted #AD5100;
    }

.process-map-info .regulations-accordion.active .regulations-title,
.process-map-info .regulations-accordion.active .regulations-title h3 {
	background: #AD5100;
	color: #fff;
    padding: 0;
}

.process-map-info .regulations-accordion.active .regulations-title h3 div {
    padding: 15px 25px 15px 10px;
    }

.process-map-info .regulations-accordion .regulations-title::after {
  content: '';
  border: solid #046a38;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  position: absolute;
  right: 15px;
  top: 23px;
  transition: transform 0.5s linear;
}

.process-map-info .regulations-accordion.active .regulations-title:after {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	border-color: #fff;
}

.process-map-info .regulations-accordion .regulations-content {
	max-height: 0;
	transition: max-height 1s linear;
    display: none;
}

.process-map-info .regulations-accordion.active .regulations-content {
	max-height: 2000px;
    display: block;
}

.process-map-info .regulations-accordion.active .regulations-content:focus {
    outline: 3px dotted #AD5100;
    outline-offset: 2px;
}

.process-map-info .regulations-accordion .regulations-inner {
	background: #fff;
	border: 1px solid #eee;
	padding: 15px;    color: #313f64;
    text-align: left;
}

.process-map-info .regulations-content.active {
	height: 100%;
}

.process-map-info .regulations-content .reg-title {
    margin: 0 0 5px 0;
    font-family: "ProximaNova-Bold";
}

.process-map-info .regulations-content .reg-content {
	margin: 0 0 20px 0;
    font-family: 'ProximaNova-Regular';
}

.youarehere {
	filter: invert(0%) sepia(90%) saturate(400%) hue-rotate(-20deg) brightness(90%) contrast(100%);
}

.recovery {
    filter: invert(0%) sepia(90%) saturate(400%) hue-rotate(-240deg) brightness(90%) contrast(100%);
    outline: 3px dotted #fff;
}

.recover-button-group {
    /*display: flex;*/
    }

.recover-button {
    display: inline-flex;
    }

.recover-button a {
    color: #045D32;
    padding: 5px 15px;
    margin: 0 10px 10px 0;
    border: 1px dashed #045D32;
    line-height: 1.2em;
    box-shadow: unset;
    transition: all 250ms ease-in-out;
    }

.recover-button a:hover {
    color: #fff;
    background-color: #AD5100;
    border: 1px dashed #AD5100;
    box-shadow: unset;
    }



.recover-button a:focus {
    outline: 3px dotted #ad5100;
    color: #fff;
    background-color: #AD5100;
    border: 1px dashed #AD5100;
    box-shadow: unset;
    }

.recover-button .sel {
    color: #fff;
    background-color: #004C97;
    border: 1px dashed #004C97;
}

.recover-button a:after {
    border-bottom: none;
    }

#sources:hover,
#collection:hover,
#influent:hover, 
#prelim:hover, 
#primary-treatment:hover, 
#secondary:hover, 
#tertiary:hover, 
#disinfection:hover, 
#effluent:hover, 
#sludge:hover, 
#anaerobic:hover, 
#dewatering:hover, 
#reuse:hover,
#reusesp:hover,
#river:hover
 {
	/*filter: invert(0%) sepia(90%) saturate(400%) hue-rotate(-33deg) brightness(90%) contrast(100%);*/
    filter: invert(0%) sepia(90%) saturate(400%) hue-rotate(-20deg) brightness(90%) contrast(100%);
	transition: all 0.5s ease;
	}

#sourcessign,
#collectionsign,
#influentsign,
#prelimsign,
#primarysign,
#secondarysign,
#tertiarysign,
#disinfectionsign,
#effluentsign,
#sludgesign,
#anaerobicsign,
#dewateringsign,
#reusesign,
#sourceshere,
#collectionhere,
#influenthere,
#prelimhere,
#primaryhere,
#secondaryhere,
#tertiaryhere,
#disinfectionhere,
#effluenthere,
#sludgehere,
#anaerobichere,
#dewateringhere,
#reusehere,
#southplatteriverhere {
    display: none;
	}

#sources:hover #sourcessign,
#collection:hover #collectionsign,
#influent:hover #influentsign, 
#prelim:hover #prelimsign, 
#primary-treatment:hover #primarysign, 
#secondary:hover #secondarysign, 
#tertiary:hover #tertiarysign, 
#disinfection:hover #disinfectionsign, 
#effluent:hover #effluentsign, 
#sludge:hover #sludgesign, 
#anaerobic:hover #anaerobicsign, 
#dewatering:hover #dewateringsign, 
#reuse:hover #reusesign
 {
	display: block;
	transition: all 0.5s ease;
	}

#sources.youarehere #sourcessign, #sources.youarehere #sourceshere,
#collection.youarehere #collectionsign, #collection.youarehere #collectionhere,
#influent.youarehere #influentsign, #influent.youarehere #influenthere,
#prelim.youarehere #prelimsign, #prelim.youarehere #prelimhere,
#primary-treatment.youarehere #primarysign, #primary-treatment.youarehere #primaryhere,
#secondary.youarehere #secondarysign, #secondary.youarehere #secondaryhere,
#tertiary.youarehere #tertiarysign, #tertiary.youarehere #tertiaryhere,
#disinfection.youarehere #disinfectionsign, #disinfection.youarehere #disinfectionhere,
#effluent.youarehere #effluentsign, #effluent.youarehere #effluenthere,
#sludge.youarehere #sludgesign, #sludge.youarehere #sludgehere,
#anaerobic.youarehere #anaerobicsign, #anaerobic.youarehere #anaerobichere,
#dewatering.youarehere #dewateringsign, #dewatering.youarehere #dewateringhere,
#reuse.youarehere #reusesign, #reuse.youarehere #reusehere,
#river.youarehere #southplatteriverhere {
       display: block;
}

/* spanish */
#sourcessignsp,
#collectionsignsp,
#influentsignsp,
#prelimsignsp,
#primarysignsp,
#secondarysignsp,
#tertiarysignsp,
#disinfectionsignsp,
#effluentsignsp,
#sludgesignsp,
#anaerobicsignsp,
#dewateringsignsp,
#reusesignsp,
#sourcesheresp,
#collectionheresp,
#influentheresp,
#prelimheresp,
#primaryheresp,
#secondaryheresp,
#tertiaryheresp,
#disinfectionheresp,
#effluentheresp,
#sludgeheresp,
#anaerobicheresp,
#dewateringheresp,
#reuseheresp,
#southplatteriverhere {
    display: none;
    }

#sources:hover #sourcessignsp:lang(es),
#collection:hover #collectionsignsp:lang(es),
#influent:hover #influentsignsp:lang(es),
#prelim:hover #prelimsignsp:lang(es),
#primary-treatment:hover #primarysignsp:lang(es),
#secondary:hover #secondarysignsp:lang(es),
#tertiary:hover #tertiarysignsp:lang(es),
#disinfection:hover #disinfectionsignsp:lang(es),
#effluent:hover #effluentsignsp:lang(es),
#sludge:hover #sludgesignsp:lang(es),
#anaerobic:hover #anaerobicsignsp:lang(es),
#dewatering:hover #dewateringsignsp:lang(es),
#reuse:hover #reusesignsp:lang(es)
 {
    display: block;
    transition: all 0.5s ease;
    }

#sources.youarehere #sourcessignsp:lang(es), #sources.youarehere #sourcesheresp:lang(es),
#collection.youarehere #collectionsignsp:lang(es), #collection.youarehere #collectionheresp:lang(es),
#influent.youarehere #influentsignsp:lang(es), #influent.youarehere #influentheresp:lang(es),
#prelim.youarehere #prelimsignsp:lang(es), #prelim.youarehere #prelimheresp:lang(es),
#primary-treatment.youarehere #primarysignsp:lang(es), #primary-treatment.youarehere #primaryheresp:lang(es),
#secondary.youarehere #secondarysignsp:lang(es), #secondary.youarehere #secondaryheresp:lang(es),
#tertiary.youarehere #tertiarysignsp:lang(es), #tertiary.youarehere #tertiaryheresp:lang(es),
#disinfection.youarehere #disinfectionsignsp:lang(es), #disinfection.youarehere #disinfectionheresp:lang(es),
#effluent.youarehere #effluentsignsp:lang(es), #effluent.youarehere #effluentheresp:lang(es),
#sludge.youarehere #sludgesignsp:lang(es), #sludge.youarehere #sludgeheresp:lang(es),
#anaerobic.youarehere #anaerobicsignsp:lang(es), #anaerobic.youarehere #anaerobicheresp:lang(es),
#dewatering.youarehere #dewateringsignsp:lang(es), #dewatering.youarehere #dewateringheresp:lang(es),
#reuse.youarehere #reusesignsp:lang(es), #reuse.youarehere #reuseheresp:lang(es),
#river.youarehere #southplatteriverhere:lang(es) {
       display: block;
}


#collection:parent.youarehere ~ #arrowoncollection { display: none;}
#collection.youarehere:parent ~ #arrowoncollection { display: none;}
#arrowoncollection { display: none;}

@media (max-width: 1200px) {
    .home .cls-1157, .home .cls-1372, .home .cls-1262 {
        display: none;
        }
    
    .process-map-block {
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: flex-start;
        height: 100%;
        }
    .process-map-image {
        margin: 0px;
        }
    .process-map-info {
        /* width: 50%; */
        /*margin: 20px 0 0 0;*/
    }
    
    .process-map-info .regulations-accordion .regulations-title {
        font-size: 1em;
    }
    
    /* only do the following on the hompage */
    .cls-2 { /* background grass */
        transform: scaleY(2.7);
        transform-origin: 0px 22px;
    }
    
    .home #effluent {
        transform: translate(-400px, 770px) scale(1.5);
    }
    
    .home #southplatteriver {
        transform: translate(-320px, 790px) scale(1.5);
    }
    
    .home #grass_edge, .home #riverbottom {
        transform: translate(0px, 1100px) scaleX(.95);
    }
    
    .home #disinfection {
        transform: translate(-760px, 1080px) scale(1.5);
    }
    
    .home #tertiary {
        transform: translate(-580px, 640px) scale(1.5);
    }
    
    .home #secondary {
       /* transform: translate(-320px, 250px) scale(1.5); */
        transform: translate(-294px,269px) scale(1.5);
    }
    
    .home #primary-treatment {
        transform: translate(-10px, 40px) scale(1.5);
    }
    
    .home #prelim {
        transform: translate(40px, 20px) scale(1.5);
    }
    
    .home #influent {
        transform: translate(0px, 0px) scale(1.5);
    }
    
    .home #collection, .home #sources, .home #mountains, .home #pipe, .home #pipe-2, .home #arrowfromhauledwaste, .home #pipe-3, .home #pipe-4, .home .cls-200, .home .cls-221  {
        transform: scale(1.5);
    }
    
    .home #sludge {
        transform: translate(0px, 160px) scale(1.5);
    }
    
    .home #anaerobic {
        transform: translate(-145px, 535px) scale(1.5);
    }
    
    .home #dewatering {
        transform: translate(-410px, 900px) scale(1.5);
    }
    
    .home #reuse {
        transform: translate(-230px, 1230px) scale(1.5);
    }
    
    .home #arrow{
        transform: translate(830px, 2270px) scale(1.5) rotate(.7turn);
    }
    
    .home #arrow-3 {
        transform: translate(-5px, -171px) scale(1.5);
    }
    
    .home #arrows, .home #arrow-2, .home #pipe-7  {
        display: none;
    }
    
    .home #pipe-5 {
        /* transform: translate(-901px, 776px) scale(1.75); */
        transform: translate(-928px,762px) scale(1.75);
    }
    
    .home .cls-1155, .home .cls-1158 {
        display: none;
    }
    
    .home #pipe-6 {
        transform: translate(-130px, 566px) scale(1.5);
    }
    
    .home #pipe-8 {
        transform: translate(36px, 44px) scale(1.5);
    }
    
    .home #pipe-9 {
      /*  transform: translate(-200px, 275px) scale(1.5); */
        transform: translate(-183px,304px) scale(1.5);
    }
    
    .home #pipe-10 {
        transform: translate(1237px, 691px) scale(1.5, 1.5) rotate(116deg);
    }
    
    .home #pipe-11 {
        transform: translate(-780px, 785px) scale(1.5);
    }
    
    .home #pipe-12 {
      /*  transform: translate(40px, 25px) scale(1.5); */
        transform: translate(75px,49px) scale(1.5);
    }
    
    .home #pipe-13 {
        transform: translate(885px, 2558px) scale(1.65) rotate(180deg);
    }
    
    .home #pipeclone1 {
        transform: translate(195px, 562px) scale(1.5);
    }
    
    .home #pipeclone2 {
        transform: translate(1134px, 1730px) rotate(180deg) scale(1.65);
    }
}

@media (max-width: 429.98px) {
    .process-map-block {
        /* height: 600px; */
    }
    .process-map-info {
        margin-top: 20px;
        padding: 10px;
    }
    .process-map-image svg {
      padding-right: 0px;
    }
}