.hexagon-elements-wrapper {
	width: 100%;
	opacity: 0;
	filter: alpha(opacity=0);
	display: none;
}
.hexagon-elements-wrapper.show {
	display:block;
	opacity: 1;
	filter: alpha(opacity=1);
}
.hexagon-elements-wrapper.display-block {
	display:block;
}
.hexagon-elements-wrapper.appear {
	-webkit-animation: appearAnimation 0.3s ease-in both;
	-moz-animation: appearAnimation 0.3s ease-in both;
	-o-animation: appearAnimation 0.3s ease-in both;
	-ms-animation: appearAnimation 0.3s ease-in both;
	animation: appearAnimation 0.3s ease-in both;
}
.hexagon-elements-wrapper.disappear {
	-webkit-animation: disappearAnimation 0.4s ease-in both;
	-moz-animation: disappearAnimation 0.4s ease-in both;
	-o-animation: disappearAnimation 0.4s ease-in both;
	-ms-animation: disappearAnimation 0.4s ease-in both;
	animation: disappearAnimation 0.4s ease-in both;
}

.hexagon-elements { 
	padding: 36px 0;
	margin: 20px 0 50px 0;
}

.single-hexagon-element{
	display: inline-block;
	position:relative;
}
.single-hexagon-element:not(.noclick) {
	cursor: pointer;
}
.single-hexagon-element.noclick {
	/*display: none ;*/
}

.hexagon {
	overflow: hidden; 
	visibility: hidden; 
	-webkit-transform: rotate(120deg); 
	-moz-transform: rotate(120deg); 
	-o-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	transform: rotate(120deg); 
	max-width: 240px;
	min-width: 120px;
	max-height: 480px;
	min-height: 240px;
	width: 120px; 
	height: 240px; 
	margin: -68px 2px;
}
.hexagon-in1 { 
	overflow: hidden; 
	width: 100%; 
	height: 100%; 
	-webkit-transform: rotate(-60deg); 
	-moz-transform: rotate(-60deg); 
	-o-transform: rotate(-60deg); 
	-ms-transform: rotate(-60deg); 
	transform: rotate(-60deg);
}
.hexagon-in2 { 
	overflow: hidden;
	width: 100%;
	height: 100%; 
	background-repeat: no-repeat; 
	background-position: 50%; 
	visibility: visible; 
	-webkit-transform: rotate(-60deg); 
	-moz-transform: rotate(-60deg); 
	-o-transform: rotate(-60deg); 
	-ms-transform: rotate(-60deg); 
	transform: rotate(-60deg); 
	position: relative; 
}

.single-hexagon-element:hover .hover-effect {opacity: 0.85;}

.hexagon-img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	opacity: 0.75;
	max-width: none;
}
#hex1 .hexagon-img {
	top: -35%;
   left: -20%;
   width: 100%;
}
#hex2 .hexagon-img {
	top: -50%;
	left: 35%;
	width: 50%;
}
#hex6 .hexagon-img {
	top: -10%;
	left: -50%;
	width: 85%;
}
#hex5 .hexagon-img {
	top: 0%;
	left: 50%;
	width: 80%;
}
#hex3 .hexagon-img {
	top: 55%;
	left: -18%;
	width: 120%;
}
#hex4 .hexagon-img {
	top: 60%;
	left: -0%;
	width: 110%;
}

.hexagon-text {
	position: absolute;
	top: 50%; 
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	/*width: 100%;*/
	z-index: 2;
}
.hexagon-text {
	font-size: 16px;
}
.hexagon-logo .hexagon-text {
	font-size: 18px;
}
:not(.hex-logo) .hexagon-text {
	color: #fff;
}
#hex1 .hexagon-text {
	-webkit-transform: translate(-50%, -20%);
	-moz-transform: translate(-50%, -20%);
	-o-transform: translate(-50%, -20%);
	-ms-transform: translate(-50%, -20%);
	transform: translate(-50%, -20%);	
}
#hex2 .hexagon-text {
	-webkit-transform: translate(-50%, -20%);
	-moz-transform: translate(-50%, -20%);
	-o-transform: translate(-50%, -20%);
	-ms-transform: translate(-50%, -20%);
	transform: translate(-50%, -20%);
}
#hex6 .hexagon-text {
	-webkit-transform: translate(-25%, -50%);
	-moz-transform: translate(-25%, -50%);
	-o-transform: translate(-25%, -50%);
	-ms-transform: translate(-25%, -50%);
	transform: translate(-27%, -50%);
}
#hex5 .hexagon-text {
	-webkit-transform: translate(-100%, -50%);
	-moz-transform: translate(-100%, -50%);
	-o-transform: translate(-100%, -50%);
	-ms-transform: translate(-100%, -50%);
	transform: translate(-130%, -50%);
}
#hex3 .hexagon-text {
	-webkit-transform: translate(-50%, -90%);
	-moz-transform: translate(-50%, -90%);
	-o-transform: translate(-50%, -90%);
	-ms-transform: translate(-50%, -90%);
	transform: translate(-50%, -90%);		
}
#hex4 .hexagon-text {
	-webkit-transform: translate(-50%, -90%);
	-moz-transform: translate(-50%, -90%);
	-o-transform: translate(-50%, -90%);
	-ms-transform: translate(-50%, -90%);
	transform: translate(-50%, -90%);
}

#hexagon-slider.parallax-slider {
	background-image: url(../images/parallax_slider_background.gif);
}

/** ============================================================================================== **/
/** ============================= Si la "pantalla" es mayor que 1180px =========================== **/
/** ============================================================================================== **/
@media screen and (min-width:1180px) {
	.hexagon {
		width: 240px; 
		height: 480px; 
		margin: -136px 2px;
	}
	.hexagon-text {
		font-size: 28px;
	}
}
/** ############################################################################################## **/

@media (min-width: 840px) {
	#porfolio-simulacion.portfolio-elements li {width: 25%;}
}