/* 

Polygon Template 

http://www.templatemo.com/free-website-templates/400-polygon

*/

.menu-container {
	position:relative;
	height: auto;
	display:block;
}

.hexagon01 {
	position: absolute;
	width: 200px;
	height: 400px;
	top: -70px;
	overflow: hidden;
	visibility: hidden;
	
	-webkit-transform: rotate(120deg);
	-moz-transform: rotate(120deg);
	-o-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	transform: rotate(120deg);
	cursor: pointer;
}

.hexagon02 {
	position: absolute;
	width: 200px;
	height: 400px;
	top: -70px;
	left: 220px;
	overflow: hidden;
	visibility: hidden;
	
	-webkit-transform: rotate(120deg);
	-moz-transform: rotate(120deg);
	-o-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	transform: rotate(120deg);
	cursor: pointer;
}

.hexagon03 {
	position: absolute;
	width: 200px;
	height: 400px;
	top: -70px;
	left: 430px;
	overflow: hidden;
	visibility: hidden;
	
	-webkit-transform: rotate(120deg);
	-moz-transform: rotate(120deg);
	-o-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	transform: rotate(120deg);
	cursor: pointer;
}

.hexagon04 {
	position: absolute;
	width: 200px;
	height: 400px;
	top: -70px;
	left: 640px;
	overflow: hidden;
	visibility: hidden;
	
	-webkit-transform: rotate(120deg);
	-moz-transform: rotate(120deg);
	-o-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	transform: rotate(120deg);
	cursor: pointer;
}

.hexagon05 {
	position: absolute;
	width: 200px;
	height: 400px;
	top: 115px;
	left: 115px;
	overflow: hidden;
	visibility: hidden;
	
	-webkit-transform: rotate(120deg);
	-moz-transform: rotate(120deg);
	-o-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	transform: rotate(120deg);
	cursor: pointer;
}

.hexagon06 {
	position: absolute;
	width: 200px;
	height: 400px;
	top: 115px;
	left: 325px;
	overflow: hidden;
	visibility: hidden;
	
	-webkit-transform: rotate(120deg);
	-moz-transform: rotate(120deg);
	-o-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	transform: rotate(120deg);
	cursor: pointer;
}

.hexagon07 {
	position: absolute;
	width: 200px;
	height: 400px;
	top: 115px;
	left: 535px;
	overflow: hidden;
	visibility: hidden;
	
	-webkit-transform: rotate(120deg);
	-moz-transform: rotate(120deg);
	-o-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	transform: rotate(120deg);
	cursor: pointer;
}

.hexagon08 {
	position: absolute;
	width: 200px;
	height: 400px;
	top: 300px;
	overflow: hidden;
	visibility: hidden;
	
	-webkit-transform: rotate(120deg);
	-moz-transform: rotate(120deg);
	-o-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	transform: rotate(120deg);
	cursor: pointer;
}

.hexagon09 {
	position: absolute;
	width: 200px;
	height: 400px;
	top: 300px;
	left: 220px;
	overflow: hidden;
	visibility: hidden;
	
	-webkit-transform: rotate(120deg);
	-moz-transform: rotate(120deg);
	-o-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	transform: rotate(120deg);
	cursor: pointer;
}

.hexagon10 {
	position: absolute;
	width: 200px;
	height: 400px;
	top: 300px;
	left: 430px;
	overflow: hidden;
	visibility: hidden;
	
	-webkit-transform: rotate(120deg);
	-moz-transform: rotate(120deg);
	-o-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	transform: rotate(120deg);
	cursor: pointer;
}

.hexagon11 {
	position: absolute;
	width: 200px;
	height: 400px;
	top: 300px;
	left: 640px;
	overflow: hidden;
	visibility: hidden;
	
	-webkit-transform: rotate(120deg);
	-moz-transform: rotate(120deg);
	-o-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	transform: rotate(120deg);
	cursor: pointer;
}

.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);
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color:none;
}

.hexagon-in2 {
	overflow: hidden;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: 50%;

	-webkit-background-size: 125%;
	-moz-background-size: 125%;
	background-size: 125%;
	visibility: visible;

	-webkit-transform: rotate(-60deg);
	-moz-transform: rotate(-60deg);
	-o-transform: rotate(-60deg);
	-ms-transform: rotate(-60deg);
	transform: rotate(-60deg);

	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.hexagon-in2:hover {
	webkit-box-shadow: inset 0 0 0 200px rgba(36,36,36, 0.7);
	box-shadow: inset 0 0 0 200px rgba(36,36,36, 0.7);
}

.overlay:hover {
	opacity:1;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-width : 419px)	{
	.hex	{ width: 50%; float: left; }
	.templatemorow	{ margin: 0 5%; }
	.hexagon2 
	{
	position: absolute;
	width: 110px;
	height: 128px;
	top: 0px;
	}
	.templatemo-hex-top1	{ margin-top: 300px; }
	.templatemo-hex-top2	{ margin-top: 100px; margin-left: 25%; }
	.templatemo-hex-top3	{ margin-top: 100px; }
	.templatemo_gallerytop	{ margin-top: 32%; }
	.templatemo_loadmore	{ margin-top: 53%; }
	.templatemo_servicetxt	{ margin-top: 230px; }
	.templatemo_servicecol2	{ margin-top: 10%; float: left; }
	.templatemo_contactmap	{ width: 250px; height: 292px; float: left; }
	.templatemo_contactmap img{ position: absolute; width: 250px; height: 292px; top: 0px; left: 15px; }
	#templatemo_map {
    width: 100%;
    height: 292px;
	}
	.blok	{ left: 13%; }
}

@media (min-width : 420px) 
and (max-width : 559px)	{
	.hex	{ width: 50%; float: left; }
	.templatemorow	{ margin: 0; }
	.hexagon2 
	{
	position: absolute;
	width: 150px;
	height: 175px;
	top: 0px;
	}
	.templatemo-hex-top1	{ margin-top: 300px; }
	.templatemo-hex-top2	{ margin-top: 130px; margin-left: 25%; }
	.templatemo-hex-top3	{ margin-top: 130px; }
	.templatemo_gallerytop	{ margin-top: 32%; }
	.templatemo_loadmore	{ margin-top: 50%; }
	.templatemo_servicetxt	{ margin-top: 230px; }
	.templatemo_servicecol2	{ margin-top: 7%; float: left; }
	.blok	{ left: 22%; }
	
}

@media(min-width:560px) and (max-width:767px)	{
	.hex	{ width: 50%; float: left; }
	.templatemorow	{ margin: 0 10%; }
	.hexagon2 
	{
	position: absolute;
	width: 200px;
	height: 250px;
	top: 0px;
	}
	.templatemo-hex-top1	{ margin-top: 300px; }
	.templatemo-hex-top2	{ margin-top: 180px; margin-left: 25%; }
	.templatemo-hex-top3	{ margin-top: 180px; }
	.templatemo_gallerytop	{ margin-top: 33%; }
	.templatemo_loadmore	{ margin-top: 48%; }
	.templatemo_servicetxt	{ margin-top: 230px; }
	.templatemo_servicecol2	{ margin-top: 7%; float: left; }
	.blok	{ left: 33%; }

}
@media (max-width: 767px)	{
	.templatemo_footer .hex_footer	{ float: left; }
	.hexagon-a	{ margin-left: 5px; }
	.hexagon-a a	{ min-width: 190px; }
	.hexagonservices a.hlinkbott	{ width: 200px; }
	.templatemo_servicerow	{margin: -10% 30px 0px 30px; }
	.templatemo_hexservices	{ width: 100%; margin-top: 5%; float: left; }

}
@media(min-width:768px) and (max-width: 991px){ 
	.templatemorow	{ margin: 0 4%; }
	.hexagon2 
	{
	position: absolute;
	width: 120px;
	height: 180px;
	top: -85px;
	}
	.templatemo-hex-top1	{ margin-top: 110px; }
	.templatemo_servicecol2	{ margin-top: 15%; float: left; }
	.s_top	{ margin-top: 14%; }
	.hexagon-a	{ margin-left: 5px; }
	.hexagon-a a	{ min-width: 190px; }
	.hexagonservices a.hlinkbott	{ width: 200px; }
	.templatemo_servicerow	{ margin: -10% 30px 0px 30px; }
	.templatemo_hexservices	{ width: 100%; margin-top: 5%; }
	.blok	{ left: 33%; }

	}
@media(min-width:768px) and (max-width: 860px){ 
	.templatemo_gallerytop	{ margin-top: 15%; }
}
@media(min-width:861px) and (max-width: 991px){ 
	.templatemo_gallerytop	{ margin-top: 14%; }
}
@media(min-width:992px){
	.templatemorow	{ margin: 0 7%; }
	.hexagon2 
	{
	position: absolute;
	width: 150px;
	height: 250px;
	top: -85px;
	}
	.templatemo-hex-top1	{ margin-top: 140px; }

}
@media(min-width:992px) and (max-width: 1200px){
	.hexagon-a	{ margin-left: 5px; }
	.hexagon-a a	{ min-width: 140px; }
	.hexagonservices a.hlinkbott	{ width: 150px; }
	.templatemo_servicerow	{ margin: 0px 30px; }
	.templatemo_contactmap	{ width: 250px; height: 292px; float: left; }
	.templatemo_contactmap img{ position: absolute; width: 250px; height: 292px; top: 0px; left: 15px; }
	#templatemo_map {
   	 width: 100%;
    height: 292px;
	}
	}
@media(min-width:992px) and (max-width: 1390px){
	.templatemo_gallerytop	{ margin-top: 15%; }
	}
@media(min-width:1400px) and (max-width:1600px)	{
 	.templatemo_gallerytop	{ margin-top: 14%; }
 }
 
@media(min-width:1200px){
	.templatemorow	{ margin: 0px 30px; }
	.hexagon2 {
	position: absolute;
	width: 200px;
	height: 250px;
	top: -85px;
}
	.templatemo-hex-top1	{ margin-top: 180px; }
	.hexagon-a	{ left: 35%; }
	.hexagon-a a	{ min-width: 190px; }
	.hexagonservices a.hlinkbott	{ width: 200px; }
	.templatemo_servicerow	{ margin: 30px 30px; }
}