@charset "utf-8";
/* CSS Document */

.interactive-triangle{ width:100%; display:block; overflow:hidden; float:left; position:relative; }
.interactive-triangle .back-ground img{ width:100%; height:auto; }
.interactive-triangle .triangle{ width:100%; display:block; overflow:hidden; padding:30px 0; }
.interactive-triangle .triangle img{ width:100%; height:auto; }

.interactive-triangle .hotspots{ width:100%; display:block; position:absolute; top:0px; overflow:hidden; cursor:pointer; }
.interactive-triangle .hotspots .top{ width:100%; height:125px; display:block; overflow:hidden;  }
.interactive-triangle .hotspots .left{ width:50%; height:125px;  display:block; overflow:hidden; float:left  }
.interactive-triangle .hotspots .right{ width:50%; height:125px; display:block; overflow:hidden; float:right; }

.interactive-triangle .title-section{ position:absolute; top:100px; width:100%; text-align:center; opacity:0.8; background:#FFF;   }
.interactive-triangle .title-section h2{ font-size:1.5rem; font-weight:bold; text-shadow: 0px 0px 10px #FFF; line-height:1.5rem; margin:1.5rem 0; }

.hide-element{ position:absolute; left:-9999px; }

@media only screen and (min-width: 350px) 
{
	.interactive-triangle .hotspots .left{ height:150px; }
	.interactive-triangle .hotspots .right{ height:150px; }
	
	.interactive-triangle .title-section{ top:120px; }
}

@media only screen and (min-width: 375px) 
{
	.interactive-triangle .back-ground img{ }
	.interactive-triangle .triangle img{ width:auto; height:auto; }
	.interactive-triangle .hotspots{ width:100%; }
	.interactive-triangle .hotspots .top{ height:200px; }
	.interactive-triangle .hotspots .left{ height:200px; }
	.interactive-triangle .hotspots .right{ height:200px; }
	
	.interactive-triangle .title-section{ top:160px; }
}

@media only screen and (min-width: 550px) 
{
	.interactive-triangle .hotspots .top{ height:250px; }
	.interactive-triangle .hotspots .left{ height:250px; }
	.interactive-triangle .hotspots .right{ height:250px; }
	
	.interactive-triangle .title-section{ top:250px; }
}

@media only screen and (min-width: 800px) 
{
	.interactive-triangle .hotspots .top{ height:275px; }
	.interactive-triangle .hotspots .left{ height:275px; }
	.interactive-triangle .hotspots .right{ height:275px; }
	
	.interactive-triangle .title-section{ top:300px; }
}

@media only screen and (min-width: 960px) 
{
	.interactive-triangle .hotspots .top{ height:325px; }
	.interactive-triangle .hotspots .left{ height:325px; }
	.interactive-triangle .hotspots .right{ height:325px; }
	
	.interactive-triangle .title-section{ top:325px; }
}