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

.hi2 {
	display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../images/projects/dalpinia/introduction/overview/image-01.jpg);
	background-position: 50% 50%;
	
	-webkit-background-size: cover;
  	   -moz-background-size: cover;
  	     -o-background-size: cover;
  	        background-size: cover;
}

.hi2.animate2 {
	display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../images/projects/dalpinia/introduction/overview/image-01.jpg);
	background-position: 50% 50%;
	
	-webkit-background-size: cover;
  	   -moz-background-size: cover;
  	     -o-background-size: cover;
  	        background-size: cover;
    
    -webkit-animation: play2 40s ease-out 0s alternate;
       -moz-animation: play2 40s ease-out 0s alternate;
        -ms-animation: play2 40s ease-out 0s alternate;
         -o-animation: play2 40s ease-out 0s alternate;
            animation: play2 40s ease-out 0s alternate;
			
	animation-timing-function:ease-in-out;
}

@-webkit-keyframes play2 {
	0%		{background-position: 50% 50%;}
	25%		{background-position: 0% 50%;}
	75% 	{background-position: 100% 50%;}
	100%	{background-position: 50% 50%;}
}

@-moz-keyframes play2 {
	0%		{background-position: 50% 50%;}
	25%		{background-position: 0% 50%;}
	75% 	{background-position: 100% 50%;}
	100%	{background-position: 50% 50%;}
}

@-ms-keyframes play2 {
	0%		{background-position: 50% 50%;}
	25%		{background-position: 0% 50%;}
	75% 	{background-position: 100% 50%;}
	100%	{background-position: 50% 50%;}
}

@-o-keyframes play2 {
	0%		{background-position: 50% 50%;}
	25%		{background-position: 0% 50%;}
	75% 	{background-position: 100% 50%;}
	100%	{background-position: 50% 50%;}
}

@keyframes play2 {
	0%		{background-position: 50% 50%;}
	25%		{background-position: 0% 50%;}
	75% 	{background-position: 100% 50%;}
	100%	{background-position: 50% 50%;}
}

.imageMap {width:100%; position:relative; height:auto;}
.imageMap img {display:block; width:100%; border-radius:20px;}
.imageMap .hotspots {width:100%; height:100%; position:absolute; left:0; top:0; visibility:hidden;}
.imageMap a {display:block; position:absolute; background:#fff; z-index:100; opacity:0.2; filter: alpha(opacity=20); border:1px solid transparent; border-radius:2px;}

.imageMap a.a1 {left:40.5%; top:2.5%; width:10%; height:6.5%;}
.imageMap a.a2 {left:40.5%; top:9.2%; width:10%; height:50.5%;}
.imageMap a.a3 {left:40%; top:60%; width:11.3%; height:4.5%;}
.imageMap a.a4 {left:40%; top:65%; width:11.3%; height:13.8%;}
.imageMap a.a5 {left:37.5%; top:79%; width:23.2%; height:3.2%;}
.imageMap a.a6 {left:37.5%; top:82.5%; width:23.2%; height:3%;}
.imageMap a.a7 {left:43.8%; top:72%; width:16.8%; height:10.5%;}

.imageMap a.b1 {left:39.5%; top:2.5%; width:18.5%; height:6.5%;}
.imageMap a.b2 {left:39.5%; top:9.2%; width:18.5%; height:50.5%;}
.imageMap a.b3 {left:40.3%; top:60%; width:17.5%; height:4.5%;}
.imageMap a.b4 {left:40.3%; top:65%; width:17.5%; height:13.8%;}
.imageMap a.b5 {left:40.3%; top:79%; width:17.5%; height:3.2%;}
.imageMap a.b6 {left:37.5%; top:82.5%; width:21%; height:3%;}


.imageMap a.c1 {left:39.5%; top:2.5%; width:18.5%; height:6.5%;}
.imageMap a.c2 {left:39.5%; top:9.2%; width:18.5%; height:50.5%;}
.imageMap a.c3 {left:39.3%; top:60%; width:18%; height:4.5%;}
.imageMap a.c4 {left:39.3%; top:65%; width:18%; height:13.8%;}
.imageMap a.c5 {left:39.3%; top:79%; width:18%; height:3.2%;}
.imageMap a.c6 {left:37.5%; top:82.5%; width:22%; height:3%;}


.imageMap a.d1 {left:46.4%; top:2.5%; width:10.5%; height:6.5%;}
.imageMap a.d2 {left:46.4%; top:9.2%; width:10.5%; height:50.5%;}
.imageMap a.d3 {left:46%; top:60%; width:11.5%; height:4.5%;}
.imageMap a.d4 {left:46%; top:65%; width:11.5%; height:13.8%;}
.imageMap a.d5 {left:46%; top:79%; width:11.5%; height:3.8%;}
.imageMap a.d6 {left:28.5%; top:82.8%; width:34%; height:3%;}
.imageMap a.d7 {left:36.5%; top:72%; width:9.5%; height:10.5%;}

.imageMap:hover .hotspots {visibility:visible;}
.imageMap .hotspots div:hover a {background:#44ac8f; z-index:100; opacity:0.5; filter: alpha(opacity=30);}


/* section 5 */

.masterplan-image{
	background:url(../images/projects/dalpinia/introduction/masterplan/image-01.jpg) center center no-repeat; 
	width:100%;
	height:100%;
	-webkit-background-size: cover;  
	-moz-background-size: cover; 
	-o-background-size: cover; 
	background-size: cover;
	}
	
	
/* section 7 */

.residential-image{
	background:url(../images/projects/dalpinia/component/residential/image-01.jpg) center center no-repeat; 
	width:100%;
	height:100%;
	-webkit-background-size: cover;  
	-moz-background-size: cover; 
	-o-background-size: cover; 
	background-size: cover;
	}
	
.commercial-image{
	background:url(../images/projects/dalpinia/component/commercial/image-01.jpg) center center no-repeat; 
	width:100%;
	height:100%;
	-webkit-background-size: cover;  
	-moz-background-size: cover; 
	-o-background-size: cover; 
	background-size: cover;
	}