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

.width-limited{
	width:100%;
	max-width:600px;
	}

.hi {
	display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../images/projects/horizon/introduction/design-concept/building.jpg);
	background-position: 50% 0%;
	
	-webkit-background-size: cover;
  	   -moz-background-size: cover;
  	     -o-background-size: cover;
  	        background-size: cover;
}

.hi.animate {
	display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../images/projects/horizon/introduction/design-concept/building.jpg);
	background-position: 50% 100%;
	
	-webkit-background-size: cover;
  	   -moz-background-size: cover;
  	     -o-background-size: cover;
  	        background-size: cover;
    
    -webkit-animation: play 30s ease-out 0s alternate;
       -moz-animation: play 30s ease-out 0s alternate;
        -ms-animation: play 30s ease-out 0s alternate;
         -o-animation: play 30s ease-out 0s alternate;
            animation: play 30s ease-out 0s alternate;
			
	animation-timing-function:ease-in-out;
}

@-webkit-keyframes play {
	0%   {background-position: 50% 0%;}
	50%  {background-position: 50% 100%;}
	90% {background-position: 50% 100%;}
	100% {background-position: 50% 100%;}
}

@-moz-keyframes play {
   0%   {background-position: 50% 0%;}
	50%  {background-position: 50% 100%;}
	90% {background-position: 50% 100%;}
	100% {background-position: 50% 100%;}
}

@-ms-keyframes play {
  0%   {background-position: 50% 0%;}
	50%  {background-position: 50% 100%;}
	90% {background-position: 50% 100%;}
	100% {background-position: 50% 100%;}
}

@-o-keyframes play {
   0%   {background-position: 50% 0%;}
	50%  {background-position: 50% 100%;}
	90% {background-position: 50% 100%;}
	100% {background-position: 50% 100%;}
}

@keyframes play {
   0%   {background-position: 50% 0%;}
	50%  {background-position: 50% 100%;}
	90% {background-position: 50% 100%;}
	100% {background-position: 50% 100%;}
}


.hi2 {
	display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../images/projects/horizon/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/horizon/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:28.9%; top:18.6%; width:36.3%; height:45%;}
.imageMap a.a3 {left:28.9%; top:64%; width:36.3%; height:4.3%;}
.imageMap a.a4 {left:25.9%; top:68.4%; width:41.8%; height:12%;}
/*.imageMap a.a5 {left:28.9%; top:79%; width:36.3%; height:4%;}
.imageMap a.a6 {left:26.8%; top:82.5%; width:43%; height:3%;}
.imageMap a.a7 {left:43.8%; top:72%; width:16.8%; height:10.5%;}*/

.imageMap a.b2 {left:31.1%; top:18.6%; width:32.2%; height:45%;}
.imageMap a.b3 {left:31.1%; top:64%; width:32.2%; height:4.3%;}
.imageMap a.b4 {left:31.1%; top:68.4%; width:32.4%; height:9.8%;}

.imageMap a.c2 {left:37.1%; top:18.6%; width:36.3%; height:45%;}
.imageMap a.c3 {left:37.1%; top:64%; width:36.3%; height:5%;}
.imageMap a.c4 {left:34.6%; top:69.4%; width:41.5%; height:12.9%;}

.imageMap a.d2 {left:31.7%; top:18.6%; width:32.2%; height:45%;}
.imageMap a.d3 {left:31.5%; top:64%; width:32.2%; height:4.3%;}
.imageMap a.d4 {left:31.3%; top:68.4%; width:32.4%; height:14.7%;}

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



/* section 2 */

.section2-right-wrapper{
	max-width: 900px; 
	width: 100%; 
	height: auto; 
	margin:0 auto;
	}	
	
.section2-right{
	position: relative;
	height:0; 
	padding-left:20px;
	padding-right:20px;
	padding-bottom:77.78%;
}

.section2-right .hotspot1{
	position: absolute; 
	z-index: 999; 
	width: 8%; 
	height:8%; 
	top: 83%; 
	left: 66%; 
	cursor:pointer;
	}
	
.section2-right .hotspot2{
	position: absolute; 
	z-index: 999; 
	width: 8%; 
	height:8%; 
	top: 65%; 
	left: 54%; 
	cursor:pointer;
	}
	
.section2-right .hotspot3{
	position: absolute; 
	z-index: 999; 
	width: 8%; 
	height:8%; 
	top: 12%; 
	left: 54%; 
	cursor:pointer;
	}
	
/* section 3*/

.section3-middle-wrapper{
	 width:279px;
	 height:auto; 
	 margin: 0 auto; 
	 }
	 
.section3-middle{
	position: relative; 
	height:0; 
	padding-bottom:74%;
	} 
	
.section3-middle .hotspot1{
	position: absolute; 
	z-index: 999; 
	width: 8%; 
	height:8%; 
	top: 82%; 
	left: 20%; 
	cursor:pointer;
	}
	
.section3-middle .hotspot2{
	position: absolute; 
	z-index: 999; 
	width: 8%; 
	height:8%; 
	top: 46%; 
	left: 90%; 
	cursor:pointer;
	}
	
.section3-middle .hotspot3{
	position: absolute; 
	z-index: 999; 
	width: 8%; 
	height:8%; 
	top: 40%; 
	left: 0%; 
	cursor:pointer;
	}
	
.section3-middle .hotspot4{
	position: absolute; 
	z-index: 999; 
	width: 8%; 
	height:8%; 
	top:2%; 
	left: 33%; 
	cursor:pointer;
	}	
	
.maphighlight-wrapper{
	margin: 0 auto;
	width:300px;
	height:300px; 
	/*width:300px;
	height:600px;*/
	}
	
	
.iosSlider-type-a, 
.iosSlider-type-b, 
.iosSlider-type-c{
	width: 100%;
	height:100%;
}
.iosSlider-type-a .slider, 
.iosSlider-type-b .slider, 
.iosSlider-type-c .slider{
	width: 100%;
	height: 100%;
}
.iosSlider-type-a .slider .item, 
.iosSlider-type-b .slider .item, 
.iosSlider-type-c .slider .item{
	width: 100%;
	height: 100%;
}
.iosSlider-type-a .slider .item .inner, 
.iosSlider-type-b .slider .item .inner, 
.iosSlider-type-c .slider .item .inner{
	position: relative;
	background-size: cover;
	background-position: 50% 50%;
	height: 100%;
	width: 100%;
}

.slideSelectors-type-a, 
.slideSelectors-type-b, 
.slideSelectors-type-c{
	position: relative;
	bottom: 85px;
	width: 100%;
	margin: 0 auto;
	z-index: 10;
	height: 10px;
	text-align:center;
}
.slideSelectors-type-a .item-a, 
.slideSelectors-type-b .item-b, 
.slideSelectors-type-c .item-c{
	display: inline-block;
	width: 40px;
	height: 6px;
	background: #ffffff;
	margin: 0 3px;
	opacity: 0.6;
	filter: alpha(opacity=60);
}
.slideSelectors-type-a .selected, 
.slideSelectors-type-b .selected, 
.slideSelectors-type-c .selected{
	background: #ffffff;
	opacity: 1;
	filter: alpha(opacity=100);
}
	

@media (min-width: 481px) and (max-width: 1023px) {
.slideSelectors-type-a, 
.slideSelectors-type-b, 
.slideSelectors-type-c, 
.slideSelectors-type-d, 
.slideSelectors-type-e, 
.slideSelectors-type-f{
	bottom: 50px;
}
}

/* Only phones */
@media (max-width: 480px) {
.slideSelectors-type-a, 
.slideSelectors-type-b, 
.slideSelectors-type-c, 
.slideSelectors-type-d, 
.slideSelectors-type-e, 
.slideSelectors-type-f{
	bottom: 30px;
}
}
	
/* section 4 */

.section4-map-wrapper{
	max-width:650px; 
	width: 100%; 
	height: auto; 
	margin:auto;"
}

.section4-map{
	position: relative; 
	height: 0px; 
	padding-bottom:87.69%;
}


.location-image{
	background:url(../images/projects/horizon/location/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 5 */

.image-gallery-01{background:url(../images/projects/andana-condo/gallery/image-01.jpg) center center no-repeat;}
.image-gallery-02{background:url(../images/projects/andana-condo/gallery/image-02.jpg) center center no-repeat;}
.image-gallery-03{background:url(../images/projects/andana-condo/gallery/image-03.jpg) center center no-repeat;}
.image-gallery-04{background:url(../images/projects/andana-condo/gallery/image-04.jpg) center center no-repeat;}
.image-gallery-05{background:url(../images/projects/andana-condo/gallery/image-05.jpg) center center no-repeat;}
.image-gallery-06{background:url(../images/projects/andana-condo/gallery/image-06.jpg) center center no-repeat;}
.image-gallery-07{background:url(../images/projects/andana-condo/gallery/image-07.jpg) center center no-repeat;}
.image-gallery-08{background:url(../images/projects/andana-condo/gallery/image-08.jpg) center center no-repeat;}
.image-gallery-09{background:url(../images/projects/andana-condo/gallery/image-09.jpg) center center no-repeat;}
.image-gallery-10{background:url(../images/projects/andana-condo/gallery/image-10.jpg) center center no-repeat;}

/* section 6 */


.contact-image{
	background:url(../images/projects/horizon/contact-us/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 */
	

.download-image{
	background:url(../images/projects/horizon/download/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;
	}