/*
http://www.hexagonalalien.es/2015/12/3-formas-de-dibujar-hexagonos-con-css.html
*/

#hexagonos {
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
    margin: 0.25em 0 1.25em; /*1.5em 0;*/
}

.cua {
	display: flex;
	flex-wrap: wrap;
    justify-content: space-around;
	width: 327px;	/* 350px; */
	/* border: 1px solid #999; */
    margin-bottom: 1em;
}

.cua2A {
	display: flex;
	margin-left: -4.5em;
}

.cua2B {
	display: none;
}

.cua3A {
	display: flex;
	margin-left: -4.5em;
}

.cua3B {
	display: none;
}

.hex1 {
	margin: 0 14px;
	overflow: hidden;
}

.hex2 {
	margin: 0 6px;
	overflow: hidden;
}

.hex3 {
	margin: 0 6px;
	overflow: hidden;
}

.hexagono-0 {
    height: 18em;	/* 20em;   /* 15em */
    margin: -65px 0;	/* -73px 0;	/* -85px 0; */
    overflow: hidden;
    transform: rotate(120deg);
    visibility: hidden;
    width: 9em;	/* 10em;    /* 7.5em */
}

.hexagono-1 {
    height: 100%;
    overflow: hidden;
    transform: rotate(-60deg);
    width: 100%;
}

.hexagono-2 {
    height: 100%;
    transform: rotate(-60deg); 
    visibility: visible ;
    width: 100%;
}

.botonIMG {
    position: relative;
    top: 72px;  /* 55px */
    left: 0;
    width: 100%;
}

@media (max-width: 1093px) {
	.cua2A {
		display: flex;
	}

	.cua2B {
		display: none;
	}

	.cua3A {
		display: flex;
	}

	.cua3B {
		display: none;
	}
}

@media (max-width: 871px) {
	.cua2A {
		display: none;
	}

	.cua2B {
		display: flex;
	}

	.cua3A {
		display: none;
	}

	.cua3B {
		display: flex;
	}
}

@media (max-width: 681px) {
	.cua2A {
		display: none;
	}

	.cua2B {
		display: flex;
	}

	.cua3A {
		display: flex;
		margin: 0;
	}

	.cua3B {
		display: none;
	}
}