@font-face {
	font-family: 'roboto';
	src: url('roboto-regular.woff') format('woff');
	font-weight: 100;
	font-style: normal;
}

*{
	font-family: 'roboto';
	margin: 0;
	padding: 0;
	max-width: 1170px;
	box-sizing: border-box;
	font-weight: 100;
	outline:0 !important;
	transform: translateZ(0);
	color: #464646;
}
body{
	position: relative;
    width: 100%;
	float: left;
}
section{
	position: relative;
	width: 100%;
	max-width: 1170px;
	height: 720px;
    left: 0;
    overflow: hidden;
}
button{
	font-size: 14px;
}
.bot{
	transition: all .3s;
	border: none;
	position: absolute;
	width: 25%;
	height: 60px;
	background-color: #f0f0f0;
	line-height: 17px;
}
.bot:hover{
  	transition: all .3s;
	background-color: #fe8200!important;
	color: #fff;
	cursor: pointer;
}
.bot2{
	width: 14%;
	height: 80px;
}
.nar{
	border-bottom: 3px solid #fe8200;
}
.gri{
	border-bottom: 3px solid #6f6258;
}
.bot3{
	transition: all .3s;
	border: none;
	position: absolute;
	width: 14%;
	height: 80px;
	padding: 0 10px;
	line-height: 17px;
	border-radius: 8px;
}
.azul{
	background-color: #006c83;
	color: #fff;
}
.naranja{
	background-color: #ff6200;
	color: #fff;
}
.naranjalinea{
	background-color: #fff;
	border: 1px solid #ff8200;
}
.azullinea{
	background-color: #fff;
	border: 1px solid #006c83;
}

#bot1{
	left: 37.5%;
	top: 20px;
}
#bot2{
	left: 37.5%;
	top: 100px;
}
#bot3{
	right: 5%;
	top: 140px;
}
#bot4{
	right: 5%;
	top: 220px;
}



#bot5{
	left: 5%;
	top: 320px;
}
#bot6{
	left: 20.2%;
	top: 320px;
}
#bot7{
	left: 35.4%;
	top: 320px;
}
#bot8{
	left: 50.6%;
	top: 320px;
}
#bot9{
	left: 65.8%;
	top: 320px;
}
#bot10{
	left: 81%;
	top: 320px;
	pointer-events: none;
}
#bot11{
	left: 50.5%;
	top: 430px;
}
#bot12{
	left: 50.5%;
	top: 530px;
}
#bot13{
	left: 50.5%;
	top: 630px;
}
#bot14{
	left: 35.5%;
	top: 530px;
}

#linea1{
	left: 50%;
	top: 24px;
	position: absolute;
	height: 270px;
	border-left: 4px dotted #e5e5e5;
}
#linea2{
	left: 50%;
	top: 169px;
	position: absolute;
	width: 240px;
	border-top: 4px dotted #e5e5e5;
}
#linea3{
	left: 82.5%;
	top: 150px;
	position: absolute;
	height: 70px;
	border-left: 4px dotted #e5e5e5;
}
#linea4{
	left: 12%;
	top: 297px;
	position: absolute;
	width: 76%;
	border-top: 4px dotted #e5e5e5;
}


#linea5{
	left: 12%;
	top: 297px;
	position: absolute;
	height: 30px;
	border-left: 4px dotted #e5e5e5;
}
#linea6{
	left: 27%;
	top: 297px;
	position: absolute;
	height: 30px;
	border-left: 4px dotted #e5e5e5;
}
#linea7{
	left: 42.5%;
	top: 297px;
	position: absolute;
	height: 30px;
	border-left: 4px dotted #e5e5e5;
}
#linea8{
	left: 57.5%;
	top: 297px;
	position: absolute;
	height: 30px;
	border-left: 4px dotted #e5e5e5;
}
#linea9{
	left: 73%;
	top: 297px;
	position: absolute;
	height: 30px;
	border-left: 4px dotted #e5e5e5;
}
#linea10{
	left: 88%;
	top: 297px;
	position: absolute;
	height: 30px;
	border-left: 4px dotted #e5e5e5;
}
.mas{display: none;}
.triangulo{
	position: absolute;
	width: 10px;
	height: 10px;
	border-top: 2px solid;
	border-right: 2px solid;
}
#flecha1{
	position: absolute;
	height: 130px;
	top: 405px;
	left: 57.5%;
	border: 1px solid #ff6200;
}
#flecha1 .triangulo{
	top: 0;
	left: -5px;
	transform: rotate(-45deg);
	border-color: #ff6200;
}
#flecha2{
	position: absolute;
	height: 30px;
	top: 405px;
	left: 60.5%;
	border: 1px solid #006c83;
}
#flecha2 .triangulo{
	top: 0;
	left: -5px;
	transform: rotate(-45deg);
	border-color: #006c83;
}
#flecha3{
	position: absolute;
	height: 50px;
	width: 7.5%;
	top: 405px;
	left: 64%;
	border-bottom: 2px solid #006c83;
	border-right: 2px solid #006c83;
}
#flecha3 .triangulo{
	top: 0;
	right: -6px;
	transform: rotate(-45deg);
	border-color: #006c83;
}
#flecha4{
	position: absolute;
	height: 80px;
	width: 22.5%;
	top: 405px;
	left: 64%;
	border-bottom: 2px solid #006c83;
	border-right: 2px solid #006c83;
}
#flecha4 .triangulo{
	top: 0;
	right: -6px;
	transform: rotate(-45deg);
	border-color: #006c83;
}
#flecha5{
	position: absolute;
	height: 150px;
	width: 10.5%;
	top: 405px;
	left: 64%;
	border-bottom: 2px solid #ff6200;
	border-right: 2px solid #ff6200;
}
#flecha5 .triangulo{
	top: 0;
	right: -6px;
	transform: rotate(-45deg);
	border-color: #ff6200;
}
#flecha6{
	position: absolute;
	height: 180px;
	width: 25.5%;
	top: 405px;
	left: 64%;
	border-bottom: 2px solid #ff6200;
	border-right: 2px solid #ff6200;
}
#flecha6 .triangulo{
	top: 0;
	right: -6px;
	transform: rotate(-45deg);
	border-color: #ff6200;
}
#flecha7{
	position: absolute;
	height: 20px;
	top: 615px;
	left: 57.5%;
	border: 1px solid #ff6200;
}
#flecha7 .triangulo{
	top: 0;
	left: -5px;
	transform: rotate(-45deg);
	border-color: #ff6200;
}
#flecha8{
	position: absolute;
	height: 120px;
	width: 12%;
	top: 420px;
	left: 42.5%;
	border-top: 2px solid #006c83;
	border-left: 2px solid #006c83;
}
#flecha9{
	position: absolute;
	height: 17px;
	top: 405px;
	left: 54.5%;
	border: 1px solid #006c83;
}
#flecha9 .triangulo{
	top: 0;
	left: -5px;
	transform: rotate(-45deg);
	border-color: #006c83;
}