/*!
Theme Name: Express Solicitors
Theme URI: https://expresssolicitors.co.uk
Author: Dave Wilkinson
Author URI: https://growpress.com
Description: Custom WordPress theme for Express Solicitors
Version: 1.0.0
Text Domain: expresssolicitors
*/

/*--------------------------------------------------------------
# Accident Map Styling
--------------------------------------------------------------*/
.map-container {
	position: relative;
	max-width: 670px;
	max-height: 488px;
	margin-left: auto;
	margin-right: auto;

	margin-bottom: 160px;
}
.map-container:before {
	content: '';
	position: absolute;
	top: 20px;
	left: 20px;
	width: 180px;
	height: 50px;
	background: transparent url('https://www.expresssolicitors.co.uk/wp-content/themes/expresssolicitors/images/logo-main.svg') no-repeat center center;
	background-size: contain;
	z-index: 2;

}

/* Info Panel */
.map-container > #marker-info {
	position: absolute;
	bottom: -100px;
	padding-top: 10px;
	left: 0;
	border: 1px solid #DDDDDF;
	border-top: 0;
	width: 100%;
	height: 110px;
}

.map-container > #marker-info > ul{
	display: flex;
	justify-content: space-around;
	padding: 0 10px;
}

.map-container > #marker-info > .marker-info-title {
	margin: 0;
	text-align: center;
	font-size: 1.5rem;
	font-weight: bold;
	/*display: none;*/
}

.map-container > #marker-info > ul > li > .year{
	font-size: 12px;
	margin-bottom: 0;
	font-weight: bold;
	border-bottom: 1px solid #fff;
	display: none;
}

.map-container > #marker-info > ul > li > .year-info{
	margin: 0;
	text-align: center;
	/*display: none;*/
}

.map-container > #marker-info > p, li {
	color: #303030;
}

.map-container > #marker-info > ul > li{
	list-style: none;
}

.map-container > ul.markers > li {
	list-style: none;
	position: absolute;
	transform: translate(-50%, -100%);
}
/* Markers | NON FATAL*/
.map-container#non-fatal > ul > li.map-marker-1 {
	top: 86%;
	left: 62.5%;
	z-index: 12;
}


.map-container#non-fatal > ul > li.map-marker-2 {
	top: 76%;
	left: 54.6%;
	z-index: 11;
}

.map-container#non-fatal > ul > li.map-marker-3 {
	top: 65.5%;
	left: 52.9%;
	z-index: 10;
}

.map-container#non-fatal > ul > li.map-marker-4 {
	top: 62%;
	left: 56%;
}

.map-container#non-fatal > ul > li.map-marker-5 {
	top: 66%;
	left: 49.2%;
	z-index: 9;
}

.map-container#non-fatal > ul > li.map-marker-6 {
	top: 66%;
	left: 56.6%;
	z-index: 7;
}

.map-container#non-fatal > ul > li.map-marker-7 {
	top: 89%;
	left: 67%;
	z-index: 6;
}

.map-container#non-fatal > ul > li.map-marker-8 {
	top: 62%;
	left: 49.9%;
	z-index: 5;
}

.map-container#non-fatal > ul > li.map-marker-9 {
	top: 92.4%;
	left: 56.7%;
	z-index: 4;
}

.map-container#non-fatal > ul > li.map-marker-10 {
	top: 83%;
	left: 65%;
}

.map-container#non-fatal > ul > li.map-marker-11 {
	top: 48%;
	left: 55.7%;
}

.map-container#non-fatal > ul > li.map-marker-12 {
	top: 66.4%;
	left: 61.2%;
}

.map-container#non-fatal > ul > li.map-marker-13 {
	top: 73%;
	left: 69%;
}

.map-container#non-fatal > ul > li.map-marker-14 {
	top: 79%;
	left: 69%;
}

.map-container#non-fatal > ul > li.map-marker-15 {
	top: 82%;
	left: 61%;
}

.map-container#non-fatal > ul > li.map-marker-16 {
	top: 76%;
	left: 58%;
}

.map-container#non-fatal > ul > li.map-marker-17 {
	top: 78%;
	left: 59%;
}

.map-container#non-fatal > ul > li.map-marker-18 {
	top: 73%;
	left: 53%;
}

.map-container#non-fatal > ul > li.map-marker-1:hover {
	z-index: 50;
}

.map-container#non-fatal > ul > li.map-marker-2:hover {
	z-index: 50;
}
.map-container#non-fatal > ul > li.map-marker-3:hover {
	z-index: 50;
}

.map-container#non-fatal > ul > li.map-marker-4:hover {
	z-index: 50;
}
.map-container#non-fatal > ul > li.map-marker-5:hover {
	z-index: 50;
}
.map-container#non-fatal > ul > li.map-marker-6:hover {
	z-index: 50;
}

.map-container#non-fatal > ul > li.map-marker-7:hover {
	z-index: 50;
}
.map-container#non-fatal > ul > li.map-marker-8:hover {
	z-index: 50;
}
.map-container#non-fatal > ul > li.map-marker-9:hover {
	z-index: 50;
}
.map-container#non-fatal > ul > li.map-marker-10:hover {
	z-index: 50;
}
.map-container#non-fatal > ul > li.map-marker-11:hover {
	z-index: 50;
}
.map-container#non-fatal > ul > li.map-marker-12:hover {
	z-index: 50;
}
.map-container#non-fatal > ul > li.map-marker-13:hover {
	z-index: 50;
}
.map-container#non-fatal > ul > li.map-marker-14:hover {
	z-index: 50;
}

.map-container#non-fatal > ul > li.map-marker-15:hover {
	z-index: 50;
}
.map-container#non-fatal > ul > li.map-marker-16:hover {
	z-index: 50;
}
.map-container#non-fatal > ul > li.map-marker-17:hover {
	z-index: 50;
}
.map-container#non-fatal > ul > li.map-marker-18:hover {
	z-index: 50;
}

/* Markers | FATAL*/
.map-container#fatal > ul > li.map-marker-1 {
	top: 80%;
	left: 55.5%;
	z-index: 12;
}


.map-container#fatal > ul > li.map-marker-2 {
	top: 98%;
	left: 43.8%;
	z-index: 11;
}

.map-container#fatal > ul > li.map-marker-3 {
	top: 62.5%;
	left: 56.4%;
	z-index: 10;
}

.map-container#fatal > ul > li.map-marker-4 {
	top: 37.8%;
	left: 44.4%;
}

.map-container#fatal > ul > li.map-marker-5 {
	top: 65%;
	left: 52.9%;
	z-index: 9;
}

.map-container#fatal > ul > li.map-marker-6 {
	top: 75%;
	left: 55.3%;
	z-index: 7;
}

.map-container#fatal > ul > li.map-marker-7 {
	top: 90%;
	left: 59%;
	z-index: 6;
}

.map-container#fatal > ul > li.map-marker-8 {
	top: 77%;
	left: 64.9%;
	z-index: 5;
}

.map-container#fatal > ul > li.map-marker-9 {
	top: 86.4%;
	left: 62.9%;
	z-index: 4;
}

.map-container#fatal > ul > li.map-marker-10 {
	top: 86%;
	left: 48.5%;
}

.map-container#fatal > ul > li.map-marker-11 {
	top: 49%;
	left: 55.7%;
}


.map-container#fatal > ul > li.map-marker-1:hover {
	z-index: 50;
}

.map-container#fatal > ul > li.map-marker-2:hover {
	z-index: 50;
}
.map-container#fatal > ul > li.map-marker-3:hover {
	z-index: 50;
}

.map-container#fatal > ul > li.map-marker-4:hover {
	z-index: 50;
}
.map-container#fatal > ul > li.map-marker-5:hover {
	z-index: 50;
}
.map-container#fatal > ul > li.map-marker-6:hover {
	z-index: 50;
}

.map-container#fatal > ul > li.map-marker-7:hover {
	z-index: 50;
}
.map-container#fatal > ul > li.map-marker-8:hover {
	z-index: 50;
}
.map-container#fatal > ul > li.map-marker-9:hover {
	z-index: 50;
}
.map-container#fatal > ul > li.map-marker-10:hover {
	z-index: 50;
}
.map-container#fatal > ul > li.map-marker-11:hover {
	z-index: 50;
}