﻿/* COLMEIA NOVA */

.colmeia {
	width: 100%;
	max-width: 100%;
	/*min-height: 850px;*/
	overflow: hidden;
	padding-right: 0;
	margin: -200px auto 0;
}

.colmeia-area {
	width: 130%;
	margin-left: -15%;
}

.hex {
	float: left;
	margin-right: -16px;
	margin-bottom: -41px;
	filter: drop-shadow(0px 4px 12px rgba(0, 60, 101, 0.1));
	position: relative;
	cursor: pointer;
	transition: all 0.3s;
	animation: zoomIn;
	animation-duration: 2.2s;
}

.hex:not(.hex[data-marca="#"]):hover {
	filter: drop-shadow(0px 4px 28px rgba(0, 60, 101, 0.5));
	z-index: 2;
	transition: all 0.3s;
}

.hex[data-marca="#"] {
	cursor: default;
}

.hex[data-marca="0"] {
	visibility: hidden;
}

.hex span {
	content: "";
	position: absolute;
	top: 20px;
	bottom: 20px;
	right: 20px;
	left: 20px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.hex .left {
	float: left;
	width: 0;
	border-right: 25px solid #fff;
	border-top: 42px solid transparent;
	border-bottom: 42px solid transparent;
}

.hex .middle {
	float: left;
	width: 50px;
	height: 84px;
	background: #fff;
}

.hex .right {
	float: left;
	width: 0;
	border-left: 25px solid #fff;
	border-top: 42px solid transparent;
	border-bottom: 42px solid transparent;
}

.hex-row {
	clear: left;
}

.hex:nth-child(even) {
	margin-top: 50px;
}

.hex:nth-child(11) {
	animation: zoomIn;
	animation-duration: 0.2s;
}

.hex:nth-child(10) {
	animation: zoomIn;
	animation-duration: 0.4s;
}

.hex:nth-child(9) {
	animation: zoomIn;
	animation-duration: 0.6s;
}

.hex:nth-child(8) {
	animation: zoomIn;
	animation-duration: 0.8s;
}

.hex:nth-child(7) {
	animation: zoomIn;
	animation-duration: 1s;
}

.hex:nth-child(6) {
	animation: zoomIn;
	animation-duration: 1.2s;
}

.hex:nth-child(5) {
	animation: zoomIn;
	animation-duration: 1.4s;
}

.hex:nth-child(4) {
	animation: zoomIn;
	animation-duration: 1.6s;
}

.hex:nth-child(3) {
	animation: zoomIn;
	animation-duration: 1.8s;
}

.hex:nth-child(2) {
	animation: zoomIn;
	animation-duration: 2s;
}

.hex[data-marca="catarinense"] span {
	background-image: url(../img/lojas/logo/catarinense.png);
}

.hex[data-marca="colgate"] span {
	background-image: url(../img/lojas/logo/colgate.png);
}

.hex[data-marca="kcc"] span {
	background-image: url(../img/lojas/logo/kcc.png);
}

.hex[data-marca="sunpharma"] span {
	background-image: url(../img/lojas/logo/sunpharma.png);
}

.hex[data-marca="althaia"] span {
	background-image: url(../img/lojas/logo/althaia.png);
}

.hex[data-marca="supera"] span {
	background-image: url(../img/lojas/logo/supera.png);
}

.hex[data-marca="ontex"] span {
	background-image: url(../img/lojas/logo/ontext.png);
}

.hex[data-marca="prevent"] span {
	background-image: url(../img/lojas/logo/prevent.png);
}

.hex[data-marca="mam"] span {
	background-image: url(../img/lojas/logo/mam.png);
	top: 28px;
	bottom: 28px;
	right: 28px;
	left: 28px;
}

.hex[data-marca="fini"] span {
	background-image: url(../img/lojas/logo/fini.png);
	top: 26px;
	bottom: 26px;
	right: 26px;
	left: 26px;
}

.hex[data-marca="legrand"] span {
	background-image: url(../img/lojas/logo/legrand.png);
}

.hex[data-marca="momenta"] span {
	background-image: url(../img/lojas/logo/momenta.png);
}

.hex[data-marca="eurofarma"] span {
	background-image: url(../img/lojas/logo/eurofarma.png);
}

.hex[data-marca="equaliv"] span {
	background-image: url(../img/lojas/logo/equaliv.png);
}

.hex[data-marca="besins"] span {
	background-image: url(../img/lojas/logo/besins.png);
	top: 28px;
	bottom: 28px;
	right: 28px;
	left: 28px;
}

.hex[data-marca="germed"] span {
	background-image: url(../img/lojas/logo/germed.png);
}

.hex[data-marca="muriel"] span {
	background-image: url(../img/lojas/logo/muriel.png);
	top: 26px;
	bottom: 26px;
	right: 26px;
	left: 26px;
}

.hex[data-marca="cimed"] span {
	background-image: url(../img/lojas/logo/cimed.png);
}

.hex[data-marca="cellera"] span {
	background-image: url(../img/lojas/logo/cellera.png);
}

.hex[data-marca="nc"] span {
	background-image: url(../img/lojas/logo/nc.png);
}

.hex[data-marca="kleyhertz"] span {
	background-image: url(../img/lojas/logo/kleyhertz.png);
	top: 12px;
	bottom: 12px;
	right: 12px;
	left: 12px;
}

.hex[data-marca="rioquimica"] span {
	background-image: url(../img/lojas/logo/rioquimica.png);
	top: 18px;
	bottom: 18px;
	right: 18px;
	left: 18px;
}

.hex[data-marca="biosintetica"] span {
	background-image: url(../img/lojas/logo/biosintetica.png);
}

.hex[data-marca="delta"] span {
	background-image: url(../img/lojas/logo/delta.png);
}

.hex[data-marca="zambon"] span {
	background-image: url(../img/lojas/logo/zambon.png);
}

.hex[data-marca="multilab"] span {
	background-image: url(../img/lojas/logo/multilab.png);
	top: 24px;
	bottom: 24px;
	right: 24px;
	left: 24px;
}

.hex[data-marca="chiesi"] span {
	background-image: url(../img/lojas/logo/chiesi.png);
}

.hex[data-marca="tena"] span {
	background-image: url(../img/lojas/logo/tena.png);
}

.hex[data-marca="rambaxy"] span {
	background-image: url(../img/lojas/logo/rambaxy.png);
}

.hex[data-marca="novaquimica"] span {
	background-image: url(../img/lojas/logo/novaquimica.png);
	top: 12px;
	bottom: 12px;
	right: 12px;
	left: 12px;
}

.hex[data-marca="ppm"] span {
	background-image: url(../img/lojas/logo/ppm.png);
}

.hex[data-marca="ache"] span {
	background-image: url(../img/lojas/logo/ache.png);
}

.hex[data-marca="hypera"] span {
	background-image: url(../img/lojas/logo/hypera.png);
}


@media screen and (min-width: 1366px) {
	/* COLMEIA NOVA */

	/* .colmeia {
		width: 100%;
		max-width: 1400px;
		min-height: 750px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: center;
		justify-content: flex-end;
		align-items: center;
		padding-right: 32px;
		margin: -340px auto 0;
	} */

	.colmeia {
		min-height: 640px;
		margin: -310px 140px 0 auto;
		width: 100%;
		max-width: 1000px;
	}

	.hex {
		float: left;
		margin-right: -23px;
		margin-bottom: -50px;
		filter: drop-shadow(0px 4px 12px rgba(0, 60, 101, 0.1));
		position: relative;
		cursor: pointer;
		transition: all 0.3s;
		animation: zoomIn;
		animation-duration: 2.2s;
	}

	.hex:not(.hex[data-marca="#"]):hover {
		filter: drop-shadow(0px 4px 28px rgba(0, 60, 101, 0.5));
		z-index: 2;
		transition: all 0.3s;
	}

	.hex[data-marca="#"] {
		cursor: default;
	}

	.hex[data-marca="0"] {
		visibility: hidden;
	}

	.hex span {
		content: "";
		position: absolute;
		top: 20px;
		bottom: 20px;
		right: 20px;
		left: 20px;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}

	.hex .left {
		float: left;
		width: 0;
		border-right: 30px solid #fff;
		border-top: 52px solid transparent;
		border-bottom: 52px solid transparent;
	}

	.hex .middle {
		float: left;
		width: 60px;
		height: 104px;
		background: #fff;
	}

	.hex .right {
		float: left;
		width: 0;
		border-left: 30px solid #fff;
		border-top: 52px solid transparent;
		border-bottom: 52px solid transparent;
	}

	.hex-row {
		clear: left;
	}

	.hex:nth-child(even) {
		margin-top: 58px;
	}

	.hex:nth-child(11) {
		animation: zoomIn;
		animation-duration: 0.2s;
	}

	.hex:nth-child(10) {
		animation: zoomIn;
		animation-duration: 0.4s;
	}

	.hex:nth-child(9) {
		animation: zoomIn;
		animation-duration: 0.6s;
	}

	.hex:nth-child(8) {
		animation: zoomIn;
		animation-duration: 0.8s;
	}

	.hex:nth-child(7) {
		animation: zoomIn;
		animation-duration: 1s;
	}

	.hex:nth-child(6) {
		animation: zoomIn;
		animation-duration: 1.2s;
	}

	.hex:nth-child(5) {
		animation: zoomIn;
		animation-duration: 1.4s;
	}

	.hex:nth-child(4) {
		animation: zoomIn;
		animation-duration: 1.6s;
	}

	.hex:nth-child(3) {
		animation: zoomIn;
		animation-duration: 1.8s;
	}

	.hex:nth-child(2) {
		animation: zoomIn;
		animation-duration: 2s;
	}

	.hex[data-marca="catarinense"] span {
		background-image: url(../img/lojas/logo/catarinense.png);
	}

	.hex[data-marca="colgate"] span {
		background-image: url(../img/lojas/logo/colgate.png);
	}

	.hex[data-marca="kcc"] span {
		background-image: url(../img/lojas/logo/kcc.png);
	}

	.hex[data-marca="sunpharma"] span {
		background-image: url(../img/lojas/logo/sunpharma.png);
	}

	.hex[data-marca="althaia"] span {
		background-image: url(../img/lojas/logo/althaia.png);
	}

	.hex[data-marca="supera"] span {
		background-image: url(../img/lojas/logo/supera.png);
	}

	.hex[data-marca="ontex"] span {
		background-image: url(../img/lojas/logo/ontext.png);
	}

	.hex[data-marca="prevent"] span {
		background-image: url(../img/lojas/logo/prevent.png);
	}

	.hex[data-marca="mam"] span {
		background-image: url(../img/lojas/logo/mam.png);
		top: 28px;
		bottom: 28px;
		right: 28px;
		left: 28px;
	}

	.hex[data-marca="fini"] span {
		background-image: url(../img/lojas/logo/fini.png);
		top: 26px;
		bottom: 26px;
		right: 26px;
		left: 26px;
	}

	.hex[data-marca="legrand"] span {
		background-image: url(../img/lojas/logo/legrand.png);
	}

	.hex[data-marca="momenta"] span {
		background-image: url(../img/lojas/logo/momenta.png);
	}

	.hex[data-marca="eurofarma"] span {
		background-image: url(../img/lojas/logo/eurofarma.png);
	}

	.hex[data-marca="equaliv"] span {
		background-image: url(../img/lojas/logo/equaliv.png);
	}

	.hex[data-marca="besins"] span {
		background-image: url(../img/lojas/logo/besins.png);
		top: 28px;
		bottom: 28px;
		right: 28px;
		left: 28px;
	}

	.hex[data-marca="germed"] span {
		background-image: url(../img/lojas/logo/germed.png);
	}

	.hex[data-marca="muriel"] span {
		background-image: url(../img/lojas/logo/muriel.png);
		top: 26px;
		bottom: 26px;
		right: 26px;
		left: 26px;
	}

	.hex[data-marca="cimed"] span {
		background-image: url(../img/lojas/logo/cimed.png);
	}

	.hex[data-marca="cellera"] span {
		background-image: url(../img/lojas/logo/cellera.png);
	}

	.hex[data-marca="nc"] span {
		background-image: url(../img/lojas/logo/nc.png);
	}

	.hex[data-marca="kleyhertz"] span {
		background-image: url(../img/lojas/logo/kleyhertz.png);
		top: 12px;
		bottom: 12px;
		right: 12px;
		left: 12px;
	}

	.hex[data-marca="rioquimica"] span {
		background-image: url(../img/lojas/logo/rioquimica.png);
		top: 18px;
		bottom: 18px;
		right: 18px;
		left: 18px;
	}

	.hex[data-marca="biosintetica"] span {
		background-image: url(../img/lojas/logo/biosintetica.png);
	}

	.hex[data-marca="delta"] span {
		background-image: url(../img/lojas/logo/delta.png);
	}

	.hex[data-marca="zambon"] span {
		background-image: url(../img/lojas/logo/zambon.png);
	}

	.hex[data-marca="multilab"] span {
		background-image: url(../img/lojas/logo/multilab.png);
		top: 24px;
		bottom: 24px;
		right: 24px;
		left: 24px;
	}

	.hex[data-marca="chiesi"] span {
		background-image: url(../img/lojas/logo/chiesi.png);
	}

	.hex[data-marca="tena"] span {
		background-image: url(../img/lojas/logo/tena.png);
	}

	.hex[data-marca="rambaxy"] span {
		background-image: url(../img/lojas/logo/rambaxy.png);
	}

	.hex[data-marca="novaquimica"] span {
		background-image: url(../img/lojas/logo/novaquimica.png);
		top: 12px;
		bottom: 12px;
		right: 12px;
		left: 12px;
	}

	.hex[data-marca="ppm"] span {
		background-image: url(../img/lojas/logo/ppm.png);
	}

	.hex[data-marca="ache"] span {
		background-image: url(../img/lojas/logo/ache.png);
	}

	.hex[data-marca="hypera"] span {
		background-image: url(../img/lojas/logo/hypera.png);
	}
}

@media screen and (min-width: 1600px) {
	.colmeia {
		min-height: 640px;
		margin: -340px 240px 15px auto;
		width: 100%;
		max-width: 1000px;
	}
}