body {
	font-family: 'Open Sans';
	font-weight: 600;
	color: #34495E;
	background: #95A5A6;
}

.wrapper {
	position: relative;
	width:500px;
	height:400px;
	margin: 0 auto;
	margin-top: 5%;
	border:10px solid white;
	background: #59ABE3;
	overflow: hidden;
	box-shadow: 0 0 0 1px #D2D7D3, 20px 20px 0px #6C7A89;
}

h1 {
	font-weight: 400;
	font-size: 40px;
	margin-left: 30px;
	margin-top: 60px;
	color:white;
  text-align:center;
}

.everest {
	position: absolute;
	left:50px;
	bottom:0;
	width: 0;
	height: 0;
	border-left: 200px solid transparent;
	border-right: 200px solid transparent;
	border-bottom: 250px solid #95A5A6;
	z-index: 5;
}

.everest::before {
	content: "";
	width: 0;
	height: 0;
	border-left: 200px solid transparent;
	border-right: 200px solid transparent;
	border-bottom: 250px solid #ECECEC;
	position: absolute;
	left:-280px;
	bottom:-350px;
}

.everest::after {
	content: "";
	width: 0;
	height: 0;
	border-left: 200px solid transparent;
	border-right: 200px solid transparent;
	border-bottom: 150px solid #ECF0F1;
	position: absolute;
	left:0px;
	bottom:-300px;
}

.hill1 {
	position: absolute;
	left:-380px;
	top:130px;
	width: 0;
	height: 0;
	border-left: 200px solid transparent;
	border-right: 200px solid transparent;
	border-bottom:160px solid #ECF0F1;
}

.hill2 {
	position: absolute;
	left:-280px;
	top:190px;
	width: 0;
	height: 0;
	border-left: 200px solid transparent;
	border-right: 200px solid transparent;
	border-bottom:100px solid #6C7A89;
}

.hill3 {
	position: absolute;
	left:-160px;
	top:180px;
	width: 0;
	height: 0;
	border-left: 200px solid transparent;
	border-right: 200px solid transparent;
	border-bottom:160px solid white;
}

.info1 {
	width:20px;
	height:20px;
	border-radius: 50%;
	background: white;
	border:3px solid #D64541;
	box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
	position: absolute;
	left:250px;
	top:150px;
	z-index: 7;
}

.info1 span {
	content: "";
	width:0px;
	height:5px;
	opacity:1;
	background: #D2D7D3;
	position: absolute;
	left:10px;
	top:7px;
	z-index: 7;
	/*-webkit-transition:all 0.5s;*/
	
}

.info1Text {
	position: absolute;
	width:0px;
	height:0px;
	border-radius: 5px;
	left:300px;
	top:115px;
	opacity: 1;
	background: white;
	text-align: center;
	box-shadow: 5px 5px 0 rgba(0,0,0,0.5);
	-webkit-transition:all 0.5s;
}

p {
	opacity: 0;

}

.info1:hover {
	cursor: pointer;
}

.info1:hover ~ .info1Text {
	width:100px;
	height:80px;
	opacity: 1;
}

.info1:hover ~ .info1Text p {
	opacity: 1;
	-webkit-transition:all 0.5s;
	-webkit-transition-delay:0.5s;
}




.info2 {
	width:20px;
	height:20px;
	border-radius: 50%;
	background: white;
	border:3px solid #D64541;
	box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
	position: absolute;
	left:360px;
	top:350px;
	z-index: 7;
}

.info2 span {
	content: "";
	width:0px;
	height:5px;
	opacity:1;
	background: #D2D7D3;
	position: absolute;
	left:10px;
	top:7px;
	z-index: 7;
	/*-webkit-transition:all 0.5s;*/
	
}

.info2Text {
	position: absolute;
	width:0px;
	height:0px;
	border-radius: 5px;
	left:380px;
	top:240px;
	opacity: 1;
	z-index: 8;
	background: white;
	text-align: center;
	padding-bottom: 20px;
	box-shadow: 5px 5px 0 rgba(0,0,0,0.5);
	-webkit-transition:all 0.5s;
}

.infoText2 p {
	opacity: 0;
}

.info2:hover {
	cursor: pointer;
}

.info2:hover ~ .info2Text {
	width:100px;
	height:80px;
	opacity: 1;
	cursor: pointer;
}

.info2:hover ~ .info2Text p {
	opacity: 1;
	-webkit-transition:all 0.5s;
	-webkit-transition-delay:0.5s;
}