@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:26.8%; top:10%; width:43%; height:57%;}
.imageMap a.a3 {left:26.4%; top:67.3%; width:43.8%; height:4.5%;}
.imageMap a.a4 {left:26.4%; top:72.1%; width:43.8%; height:6.6%;}
.imageMap a.a5 {left:27.3%; top:79%; width:41.8%; 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:43.1%; top:10%; width:13.8%; height:57%;}
.imageMap a.b3 {left:42.7%; top:67.3%; width:14.3%; height:4.5%;}
.imageMap a.b4 {left:42.7%; top:72.1%; width:14.3%; height:6.6%;}
.imageMap a.b5 {left:40.1%; top:79%; width:16.9%; height:4.2%;}

.imageMap a.c2 {left:26.8%; top:10%; width:43%; height:57%;}
.imageMap a.c3 {left:26.4%; top:67.3%; width:43.8%; height:4.5%;}
.imageMap a.c4 {left:26.4%; top:72.1%; width:43.8%; height:6.6%;}
.imageMap a.c5 {left:27.4%; top:79%; width:41.8%; height:4%;}


.imageMap a.d2 {left:42.6%; top:10%; width:14.4%; height:57%;}
.imageMap a.d3 {left:42.7%; top:67.3%; width:14.4%; height:4.5%;}
.imageMap a.d4 {left:42.5%; top:72.1%; width:14.7%; height:6.6%;}
.imageMap a.d5 {left:43.8%; top:79%; width:12.5%; height:4%;}

.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:36.7%;
}

.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:250px;
	height:500px; 
	/*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/horizon/gallery/image-01.jpg) center center no-repeat;}
.image-gallery-02{background:url(../images/projects/horizon/gallery/image-02.jpg) center center no-repeat;}
.image-gallery-03{background:url(../images/projects/horizon/gallery/image-03.jpg) center center no-repeat;}
.image-gallery-04{background:url(../images/projects/horizon/gallery/image-04.jpg) center center no-repeat;}
.image-gallery-05{background:url(../images/projects/horizon/gallery/image-05.jpg) center center no-repeat;}
.image-gallery-06{background:url(../images/projects/horizon/gallery/image-06.jpg) center center no-repeat;}
.image-gallery-07{background:url(../images/projects/horizon/gallery/image-07.jpg) center center no-repeat;}
.image-gallery-08{background:url(../images/projects/horizon/gallery/image-08.jpg) center center no-repeat;}
.image-gallery-09{background:url(../images/projects/horizon/gallery/image-09.jpg) center center no-repeat;}
.image-gallery-10{background:url(../images/projects/horizon/gallery/image-10.jpg) center center no-repeat;}
.image-gallery-11{background:url(../images/projects/horizon/gallery/image-11.jpg) center center no-repeat;}
.image-gallery-12{background:url(../images/projects/horizon/gallery/image-12.jpg) center center no-repeat;}
.image-gallery-13{background:url(../images/projects/horizon/gallery/image-13.jpg) center center no-repeat;}
.image-gallery-14{background:url(../images/projects/horizon/gallery/image-14.jpg) center center no-repeat;}
.image-gallery-15{background:url(../images/projects/horizon/gallery/image-15.jpg) center center no-repeat;}
.image-gallery-16{background:url(../images/projects/horizon/gallery/image-16.jpg) center center no-repeat;}
.image-gallery-17{background:url(../images/projects/horizon/gallery/image-17.jpg) center center no-repeat;}
.image-gallery-18{background:url(../images/projects/horizon/gallery/image-18.jpg) center center no-repeat;}


/* section 6 */

.image-progress-01{background:url(../images/projects/horizon/progress/image-01.jpg) center center no-repeat;}
.image-progress-02{background:url(../images/projects/horizon/progress/image-02.jpg) center center no-repeat;}


/* section 7 */

.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 8 */

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