section#realizations {
	display:flex;
	margin-top:60px;
}

section#realizations #map {
	flex:0 0 33.3333%;
	margin-top:0;
	height:600px;
}
section#realizations nav ul {
	margin:0;
	padding:0;
	list-style:none;
	display:flex;
	text-transform: uppercase;
	flex-wrap:wrap;
	font-weight:500;
	margin:0 15px;
}
section#realizations nav ul li {
	padding:3px 10px;
    margin:2px;
	opacity:.7;
	cursor: pointer;
	transition:all .2s ease;
    border-radius:8px;

}
section#realizations nav ul li:hover {
	background:#5b6f7d;
	color:#fff;
}
section#realizations nav ul li.active {
	background:#5b6f7d;
	color:#fff;
	opacity:1;
}

#realisation {
    position: relative;
    font-size: 18px;
    margin-top:100px;
    min-height: 800px;
    text-align:center;
}

#realisation_title {
    position:relative;
    font-size:64px;
}

#realisation_list {
    text-align: left;
    margin-bottom: 200px;
}
#realisation_list ul {
    display: flex;
    flex-wrap: wrap;
}
#realisation_list ul li{
    flex:1;
    min-width: 250px;
    cursor:pointer;
}
#realisation_list ul li:hover{
text-decoration: underline;
}

#realisation_grid {
    position:relative;
    height: 1000px;
    margin-top:-100px;
    margin-bottom:300px;
}
#realisation_grid > div {
 position:absolute;
}
#realisation_grid > div  div {
    position:relative;
}

#realisation_grid img {
    width: 100%;
    cursor:pointer;
    border-radius:12px;
}

#realisation_1 {
    left:-30%;
    top:50%;
    width:80%;
    transform: translate(-50%, -50%);

}
#realisation_2 {
    left:20%;
    top:70%;
    width:60%;
    transform: translate(-50%, -50%);

}
#realisation_3 {
    left:130%;
    top:50%;
    width:90%;
    transform: translate(-50%, -50%);

}
#realisation_4 {
    left:60%;
    top:50%;
    width:60%;
    transform: translate(-50%, -50%);

}