
/**** | PRE-EXISTING Styles | ****/
.operation-overview {display: none; }
.operation-overview.show {display: block; }
.operation-overview h3 {color: #ffffff; margin: 0; }
.operation-overview__image {height: 176px; /*height: 225px;*/ overflow: hidden; width: 100%; position: relative;}
.operation-overview__image::before {content:''; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background-color: #000000; opacity: 0; transition: all 0.25s ease-in-out; 
	z-index: 1;}
.operation-overview__image:hover::before {opacity: 0.3;}
.operation-overview__image {background-size: cover; background-position: center center; background-repeat: no-repeat;}
.operation-overview__image img {-o-object-fit: cover; object-fit: cover; max-width: 100%; position: relative;z-index: 0;}
.operation-overview__image a {position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 2;}
.operation-overview__table {padding: 35px 30px; }
.operation-overview__table--button {color: #b1121c; font-size: 16px; font-weight: 900; line-height: 1.69; text-transform: uppercase; }
.operation-overview__table table td {vertical-align: top; }

/**** | NEW Styles | ****/
.map-container {margin-top: 101px;}
/* .map-container #map {background-image: url('../../../../_resources/operations/google-map-preload-bg.jpg'); background-size:  cover; background-position:  center; background-repeat:  no-repeat;} */
body.scrolled .map-container {margin-top: 70px;}
.map-container #information-pane {background: transparent; bottom: 50px; min-height: 542px; left: calc(50% - 800px); position: absolute; width: 600px;overflow: hidden;pointer-events: none;}
.map-container #information-pane.show {pointer-events: all;} 
.map-container #information-pane .close-pane {background-color: #232323; height: 32px; position: absolute; top: 0; right: 0; width: 32px; z-index: 1; align-items: center; display: flex; 
	height: 32px; justify-content: center; cursor: pointer; z-index: 5;}
.map-container #information-pane .close-pane span {background: #ffffff; height: 1px; position: absolute; width: 20px; -webkit-transform-origin: center; transform-origin: center; z-index: 2; }
.map-container #information-pane .close-pane span:nth-of-type(1) {-webkit-transform: rotate(45deg); transform: rotate(45deg); }
.map-container #information-pane .close-pane span:nth-of-type(2) {-webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.map-container #information-pane .operation-overview {background: rgba(0, 0, 0, 0.85); width: 100%; height: 100%; position: relative;overflow: hidden; display: none;}
.map-container #information-pane .operation-overview.show {display: block;}
/*.map-container #information-pane .operation-overview.original {max-height: 504px; margin-top: 38px;}*/
.map-container #information-pane .operation-overview .text {padding: 30px 30px 50px 30px;}
.map-container #information-pane .operation-overview.original .text {padding: 45px 50px 20px 60px;}
.map-container #information-pane .operation-overview .text table {margin-top:20px;}
.map-container #information-pane .operation-overview .text table td {font-size: 12px; line-height: 1.42; letter-spacing: 0.86px; color: #8d8d8d; text-transform: uppercase; font-weight: 700; 
	padding-bottom: 15px;}
.map-container #information-pane .operation-overview .text table td:nth-of-type(3) {color: #ffffff;}
.map-container #information-pane .operation-overview .text a {font-size: 16px; font-weight: 900; color: #b1121c; text-transform: uppercase; line-height: 1.69; position: absolute; left: 30px; 
	bottom: 25px; transition: all 0.25s ease-in-out;}
.map-container #information-pane .operation-overview .text a:hover {color: #ffffff;}
.map-container #legend {position: absolute; bottom: 24px; left: calc(50% - (800px - 354px - 40px)); right: 100px; min-height: 54px; background-color: #ffffff; 
	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.19); display: flex; align-items: center; justify-content: space-evenly; padding-left: 15px;}
.map-container #legend > div {display: flex; align-items: center; justify-content: space-evenly; }
.map-container #legend .icon {font-size: 20px; line-height: 1.35; display: flex; align-items: center;}
.map-container #legend > div:nth-of-type(2) .icon i::before {color: #b1121c;}
.map-container #legend > div:nth-of-type(3) .icon i::before {color: #a3a3a3;}
.map-container #legend > div:nth-of-type(4) .icon i::before {color: #000000;}
.map-container #legend > div:nth-of-type(5) .icon i::before {color: #2d2e7c;}
.map-container #legend .text {padding: 10px 15px 10px 10px; font-size: 12px; text-transform: uppercase; color: #000000; line-height: 1.42; letter-spacing: 0.86px; font-weight: 700;}

/**** | Media Queries | *****/
@media screen and (max-width: 1899px) {
.map-container #information-pane {left: calc(50% - 600px);}	
.map-container #legend {left: calc(50% - (600px - 354px - 40px));
}
@media screen and (max-width: 1500px) {
.map-container #information-pane {left: 50px;}	
.map-container #legend {left: 444px;}
}
@media screen and (max-width: 1240px) {
.map-container #information-pane {left: 20px;}	
.map-container #legend {left: 414px;}
}
@media screen and (max-width: 1100px) {
.map-container #legend .text {font-size: 10px;}
}
@media screen and (max-width: 1024px) {
.map-container {margin-top: 80px;}	
}
@media screen and (max-width: 1023px) {
.map-container {min-height: initial; height: auto;}
.map-container #map {display: none;}
.map-container #information-pane {top: 0px; right: 0px; bottom: 0px; left: 0px; width: auto; height: auto; min-height: initial; position: relative;}
.map-container #information-pane .operation-overview {display: none !important;}
.map-container #information-pane .operation-overview.original {max-height: initial; margin-top: 0px; display: block !important; min-height: initial; width: 100%;}
.map-container #information-pane .operation-overview.original .text {padding: 45px 20px 110px 20px;}
.map-container #information-pane h6 {display: none;}
.map-container #information-pane h4 {font-size: 16px; line-height: 1.69;}
.map-container #information-pane h2 {font-size: 30px;}
.map-container #information-pane .close-pane {display: none;}
.map-container #legend {display: none;}
}

@media screen and (max-width: 480px) {
.map-container {margin-top: 68px;}	
}
