.hexagon
{
	position: absolute;
	margin-top: 100px;
	margin-left: 80px;

	transform: translate(-50%,-50%) rotate(120deg);
	max-width: 300px;
	border-radius: 50%;
	overflow: hidden;
	
}

.hexagon-in
{
	
	border-radius: 50%;
	transform: rotate(-60deg);
	overflow: hidden;
	
}

.hexagon-in-in
{
	
	border-radius: 50%;
	transform: rotate(-60deg);
	overflow: hidden;

}

@media only screen and (max-width: 800px)
{
	
.hexagon
{
	
	position: relative;
	margin-left: 0px;
    left: 50%;
	right: 50%;
	top: 80px;
	transform: translate(-50%,-50%) rotate(120deg);
	max-width: 400px;
	
	border-radius: 50%;
	overflow: hidden;
	
}

.hexagon-in
{
	
	border-radius: 50%;
	transform: rotate(-60deg);
	overflow: hidden;

}

.hexagon-in-in
{
	
	border-radius: 50%;
	transform: rotate(-60deg);
	overflow: hidden;
	
}
}