/* Circle effect 

.container:before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background: rgba(255,255,255,.2);
	border-radius: 100%;


	
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;

	
}
.container:hover::before {


	
	-webkit-animation: circle 0.9s;
	animation: circle 0.9s;
	cursor:pointer;
	
}	

@-webkit-keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 10%;
		height: 10%;
		opacity: 0;
	}
}
@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 170%;
		height: 170%;
		opacity: 0;
	}
}

*/

/* zoom effect */


/*


.container {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .01s ease-in-out;
	transition: .01s ease-in-out;

}



.container:hover {
	-webkit-transform: scale(1.15);
	transform: scale(1.15);
}



*/

/* Arrow between structures */

body {
  background: lightblue;
}



.arrow1 {
  width: 30px;
  height: 120px;
  position: relative;
  display: inline-block;
  margin: 10px 10px;
 transform: rotate(-50deg);
 top:20px;
 left:215px;
}



.arrow1:before, .arrow1:after {
  content: '';
  border-color: transparent;
  border-style: solid;
  position: absolute;

}


.arrow1-up:before {
  border: none;
  background-color:white;
  height: 150%;
  width: 10%;
  top: 10%;
  left: 19%;
}
.arrow1-up:after {
  left: 0;
  top: 0%;
  border-width: 10px 10px;
  border-bottom-color:white;
}




.arrow2 {
  width: 30px;
  height: 105px;
  position: relative;
  display: inline-block;
  margin: 10px 10px;
 transform: rotate(-110deg);
 top:145px;
 left:125px;
}



.arrow2:before, .arrow2:after {
  content: '';
  border-color: transparent;
  border-style: solid;
  position: absolute;

}


.arrow2-up:before {
  border: none;
  background-color:white;
  height: 150%;
  width: 10%;
  top: 20%;
  left: 19%;
}
.arrow2-up:after {
  left: 0;
  top: 0%;
  border-width: 10px 10px;
  border-bottom-color:white;
}



.arrow3 {
  width: 30px;
  height: 70px;
  position: relative;
  display: inline-block;
  margin: 10px 10px;
 transform: rotate(-110deg);
 top:190px;
 left:175px;
}



.arrow3:before, .arrow3:after {
  content: '';
  border-color: transparent;
  border-style: solid;
  position: absolute;

}


.arrow3-up:before {
  border: none;
  background-color:white;
  height: 150%;
  width: 10%;
  top: 20%;
  left: 19%;
}
.arrow3-up:after {
  left: 0;
  top: 0%;
  border-width: 10px 10px;
  border-bottom-color:white;
}




.arrow4 {
  width: 30px;
  height: 70px;
  position: relative;
  display: inline-block;
  margin: 10px 10px;
 transform: rotate(-240deg);
 top:220px;
 left:280px;
}



.arrow4:before, .arrow4:after {
  content: '';
  border-color: transparent;
  border-style: solid;
  position: absolute;

}


.arrow4-up:before {
  border: none;
  background-color:white;
  height: 150%;
  width: 10%;
  top: 20%;
  left: 19%;
}
.arrow4-up:after {
  left: 0;
  top: 0%;
  border-width: 10px 10px;
  border-bottom-color:white;
}


.arrow5 {
  width: 30px;
  height: 130px;
  position: relative;
  display: inline-block;
  margin: 10px 10px;
 transform: rotate(50deg);
 top:35px;
 left:365px;
}



.arrow5:before, .arrow5:after {
  content: '';
  border-color: transparent;
  border-style: solid;
  position: absolute;

}


.arrow5-up:before {
  border: none;
  background-color:white;
  height: 150%;
  width: 10%;
  top: 10%;
  left: 19%;
}
.arrow5-up:after {
  left: 0;
  top: 0%;
  border-width: 10px 10px;
  border-bottom-color:white;
}




.arrow6 {
  width: 30px;
  height: 110px;
  position: relative;
  display: inline-block;
  margin: 10px 10px;
 transform: rotate(110deg);
 top:162px;
 left:295px;
}



.arrow6:before, .arrow6:after {
  content: '';
  border-color: transparent;
  border-style: solid;
  position: absolute;

}


.arrow6-up:before {
  border: none;
  background-color:white;
  height: 150%;
  width: 10%;
  top: 10%;
  left: 19%;
}
.arrow6-up:after {
  left: 0;
  top: 0%;
  border-width: 10px 10px;
  border-bottom-color:white;
}


/* fleches du bas */


.arrow7{
  width: 30px;
  height: 60px;
  position: relative;
  display: inline-block;
  margin: 10px 10px;
 transform: rotate(105deg);
 top:342px;
 left:280px;
}



.arrow7:before, .arrow7:after {
  content: '';
  border-color: transparent;
  border-style: solid;
  position: absolute;

}


.arrow7-up:before {
  border: none;
  background-color:white;
  height: 150%;
  width: 10%;
  top: 30%;
  left: 19%;
}
.arrow7-up:after {
  left: 0;
  top: 0%;
  border-width: 10px 10px;
  border-bottom-color:white;
}


.arrow8{
  width: 30px;
  height: 20px;
  position: relative;
  display: inline-block;
  margin: 10px 10px;
 transform: rotate(180deg);
 top:320px;
 left:130px;
}



.arrow8:before, .arrow8:after {
  content: '';
  border-color: transparent;
  border-style: solid;
  position: absolute;

}


.arrow8-up:before {
  border: none;
  background-color:white;
  height: 150%;
  width: 10%;
  top: 50%;
  left: 19%;
}
.arrow8-up:after {
  left: 0;
  top: 0%;
  border-width: 10px 10px;
  border-bottom-color:white;
}



.arrow9{
  width: 30px;
  height: 70px;
  position: relative;
  display: inline-block;
  margin: 10px 10px;
 transform: rotate(260deg);
 top:322px;
 left:-10px;
}



.arrow9:before, .arrow9:after {
  content: '';
  border-color: transparent;
  border-style: solid;
  position: absolute;

}


.arrow9-up:before {
  border: none;
  background-color:white;
  height: 150%;
  width: 10%;
  top: 30%;
  left: 19%;
}
.arrow9-up:after {
  left: 0;
  top: 0%;
  border-width: 10px 10px;
  border-bottom-color:white;
}



.arrow10{
  width: 30px;
  height: 55px;
  position: relative;
  display: inline-block;
  margin: 10px 10px;
 transform: rotate(250deg);
 top:322px;
 left:-505px;
}



.arrow10:before, .arrow10:after {
  content: '';
  border-color: transparent;
  border-style: solid;
  position: absolute;

}


.arrow10-up:before {
  border: none;
  background-color:white;
  height: 150%;
  width: 10%;
  top: 30%;
  left: 19%;
}
.arrow10-up:after {
  left: 0;
  top: 0%;
  border-width: 10px 10px;
  border-bottom-color:white;
}




.arrow11{
  width: 30px;
  height: 50px;
  position: relative;
  display: inline-block;
  margin: 10px 10px;
 transform: rotate(110deg);
 top:336px;
 left:-445px;
}



.arrow11:before, .arrow11:after {
  content: '';
  border-color: transparent;
  border-style: solid;
  position: absolute;

}


.arrow11-up:before {
  border: none;
  background-color:white;
  height: 150%;
  width: 10%;
  top: 30%;
  left: 19%;
}
.arrow11-up:after {
  left: 0;
  top: 0%;
  border-width: 10px 10px;
  border-bottom-color:white;
}