.hex
{
	cursor:pointer;
	display:inline-block;
	margin-left: 2px;
	margin-bottom: -30px;
	
	
}

.hex .top 
{
	width: 0;
	border-bottom: 30px solid #3c8dbc;
	border-left: 52px solid transparent;
	border-right: 52px solid transparent;

}

.hex .middle 
{
	width: 104px;
	height: 60px;
	background: #3c8dbc;
	vertical-align: middle;
	line-height: 60px;
	margin-bottom: -15px;
	border-radius:2px;
	font-size:12px;
	font-weight: bold;
	font-family: Arial;
	color:white;
	text-align:center;
}

.hex .bottom 
{
	width: 0;
	border-top: 30px solid #3c8dbc;
	border-left: 52px solid transparent;
	border-right: 52px solid transparent;
	margin-bottom: -29.5px !important;
}

.hex:hover .top 
{
	border-bottom: 30px solid #424242;

}

.hex:hover .middle
{
	background: #424242;

}

.hex:hover .bottom 
{
	border-top: 30px solid #424242;
}

.hex .top , .hex .bottom 
{
	display: inline-block!important;
	margin-bottom: -6px;
}

.hexmargin
{
	margin-left:57px;
}

.hex-transitionexpand 
{
    -webkit-transform: scale(1.3); 
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
}

.hex-transitioncollapse 
{
    -webkit-transform: scale(0.7); 
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
    transform: scale(0.7);
}



/*CONTENEDOR*/
.hex-lines,.hex-lines-black
{
	padding-top:14px;
	padding-left:14px;
	padding-bottom:45px;
}

.hex-lines-black
{
	border:1px solid black;
	background-color: #222222;
}




/*DOBLE*/
.hex2 .middle
{
	width: 212px!important;
}


.hex2 .top 
{
	border-left: 53px solid transparent;
	border-right: 53px solid transparent;

}
.hex2 .bottom 
{
	border-left: 53px solid transparent;
	border-right: 53px solid transparent;
}

.hex-text-bottom .middle
{
	vertical-align: bottom!important;
}

.hex-line-normal .middle
{
	line-height:2!important;
}

.hex:hover
{
	z-index: 20;
	opacity:1!important;
}



.hex_add_right
{
	width:200px;
	height: 118.5px;
	background: #8c8c8c;
	position:absolute;
	margin-top:-109px;
	margin-left:53px;
	z-index:-14;
	border-radius:0 50px 50px 0px;
	padding-left:55px;
	padding-top:8px;
	font-size:10px;
}

.hex_add_left
{
	width:200px;
	height: 118.5px;
	background: #8c8c8c;
	position:absolute;
	margin-top:-109px;
	margin-left:calc(53px - 200px);
	z-index:-14;
	border-radius:50px 0px 0px 50px;
	padding-left:20px;
	padding-top:8px;
	font-size:10px;
}

/*XL*/

.hex-xl .hex
{
	margin-left: 4px;
	margin-bottom: 14px;
	
	
}

.hex-xl .hex .top 
{
	width: 0;
	border-bottom: 60px solid #3c8dbc;
	border-left: 104px solid transparent;
	border-right: 104px solid transparent;

}

.hex-xl .hex .middle 
{
	width: 208px;
	height: 120px;
	background: #3c8dbc;
	line-height: 120px;
	margin-bottom: -30px;

}

.hex-xl .hex .bottom 
{
	width: 0;
	border-top: 60px solid #3c8dbc;
	border-left: 104px solid transparent;
	border-right: 104px solid transparent;
	margin-bottom: -74px !important;
}


.hex-xl .hex:hover .top 
{
	border-bottom: 60px solid #424242;

}

.hex-xl .hex:hover .middle
{
	background: #424242;

}

.hex-xl .hex:hover .bottom 
{
	border-top: 60px solid #424242;
}



.hex-xl .hexmargin
{
	margin-left:111px;
}

.hex-xl.hex-lines,.hex-xl.hex-lines-black
{
	padding-top:14px;
	padding-left:14px;
	padding-bottom:90px;
}


/*XS*/

.hex-xs
{
	margin-left: 0.5px!important;
	margin-bottom: -7.5px!important;
	font-size:6!important;
}

.hex-xs .top 
{
	border-bottom: 7.5px solid #3c8dbc!important;
	border-left: 13px solid transparent!important;
	border-right: 13px solid transparent!important;
	margin-bottom: 8px !important;

}

.hex-xs .middle 
{
	width: 26px!important;
	height: 15px!important;
	line-height: 15px!important;
	margin-bottom: -15px!important;
	border-radius:0.5px!important;
	margin-top: -13px;
}

.hex-xs .bottom 
{
	border-top: 7.5px solid #3c8dbc!important;
	border-left: 13px solid transparent!important;
	border-right: 13px solid transparent!important;
	margin-bottom: -7px !important;
}

.hex-xs:hover .top 
{
	border-bottom: 7.5px solid #424242!important;

}

.hex-xs:hover .bottom 
{
	border-top: 7.5px solid #424242!important;
}


.hex-xs.hexmargin
{
	margin-left:14.25px!important;
}


/*DOBLE*/
.hex-xs.hex2 .middle
{
	width: 53px!important;
}

.hex-xs.hex2 .top 
{
	border-left: 13.25px solid transparent!important;
	border-right: 13.25px solid transparent!important;

}
.hex-xs.hex2 .bottom 
{
	border-left: 13.25px solid transparent!important;
	border-right: 13.25px solid transparent!important;
}


.hex-danger .middle
{
	background-color: #CA4343!important;
}
.hex-danger .top
{
	border-bottom: 30px solid #CA4343!important;
}
.hex-danger .bottom
{
	border-top: 30px solid #CA4343!important;
}

.hex-success .middle
{
	background-color: #00a65a!important;
}
.hex-success .top
{
	border-bottom: 30px solid #00a65a!important;
}
.hex-success .bottom
{
	border-top: 30px solid #00a65a!important;
}



.hex-purple .middle
{
	background-color: #932ab6 !important;
}
.hex-purple .top
{
	border-bottom: 30px solid #932ab6 !important;
}
.hex-purple .bottom
{
	border-top: 30px solid #932ab6 !important;
}


.hex-yellow .middle
{
	background-color: #E2EB63  !important;
}
.hex-yellow .top
{
	border-bottom: 30px solid #E2EB63  !important;
}
.hex-yellow .bottom
{
	border-top: 30px solid #E2EB63  !important;
}


.hex-orange .middle
{
	background-color: #FFB004 !important;
}
.hex-orange .top
{
	border-bottom: 30px solid #FFB004 !important;
}
.hex-orange .bottom
{
	border-top: 30px solid #FFB004 !important;
}


.hex-gray .middle
{
	background-color: #424242 !important;
}
.hex-gray .top
{
	border-bottom: 30px solid #424242 !important;
}
.hex-gray .bottom
{
	border-top: 30px solid #424242 !important;
}