@charset "utf-8";
/* CSS Document */
html,body{
	font-family: open-sans, "open-sans", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-style: normal;
	font-weight: 300;
}
.header-row1{background-color: #404040; color:#ffffff; font-style: italic;position: relative; z-index: 100;}
.header-row2{background-color: #1b75bc; color:#ffffff; font-weight: 900; position: relative; z-index: 100;}
.image-row{ height: 80vmin;  position: relative;}
.hero-image{background:url(../images2/hk.jpg) no-repeat top; background-size: cover; height: 80vmin;}
.top-header1{display: block; padding:20px 0; font-size: 2em; font-style: italic}
.top-header2{display: block; padding:20px 0; font-size: 2em; font-weight: bold;}
.ripple-dot{display: block; background:url(../images/bullet-ripple.jpg) no-repeat left top; background-size: 110px 80px; padding:20px 0 20px 100px; font-size: 1.5em; min-height: 80px;	 }
.dot-icon{display: block; background:url(../images/SVG/bullet-inform.svg) no-repeat left top; background-size: 60px 60px; padding:10px 0 20px 100px; font-size: 1.5em; min-height: 80px;	 }
.last-row{min-height: 100vh;}
.down-arrow{display: block; pointer-events: none; width:30px; height: 16px; background:url(../images/SVG/down-arrow.svg) no-repeat center; position: absolute; bottom:20px; left:50%; margin-left: -15px; animation: MoveUpDown 2s ease infinite; z-index: 1000;}
.bottom-text{font-size: 2em;}


.intro-text {
  position: absolute;
  border-top: 1px solid #999999;
background-color: rgba(255,255,255,0.9);
	padding:20px 20px 50px; 
	font-size: 1.5em;
	bottom: 0;
	margin: 20px 20px 0;
}
.intro-text:before, .intro-text:after {
  content: "";
  position: absolute;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#999999), to(transparent));
  background-image: -webkit-linear-gradient(#999999, transparent);
  background-image: -moz-linear-gradient(#999999, transparent);
  background-image: -o-linear-gradient(#999999, transparent);
  background-image: linear-gradient(#999999, transparent);
  top: -1px;
  bottom: -1px;
  width: 1px;
}
.intro-text:before {
  left: -1px;
}
.intro-text:after {
  right: -1px;
}


#icon1{background:url(../images/SVG/bullet-upgrade.svg) no-repeat left top; background-size: 60px 60px;}
#icon2{background:url(../images/SVG/bullet-update.svg) no-repeat left top; background-size: 60px 60px;}
#icon3{background:url(../images/SVG/bullet-time.svg) no-repeat left top; background-size: 60px 60px;}
#icon4{background:url(../images/SVG/bullet-displays.svg) no-repeat left top; background-size: 60px 60px;}
#icon5{background:url(../images/SVG/bullet-tool.svg) no-repeat left top; background-size: 60px 60px;}
#icon6{background:url(../images/SVG/bullet-display-phone.svg) no-repeat left top; background-size: 60px 60px;}
#icon7{background:url(../images/SVG/bullet-engage.svg) no-repeat left top; background-size: 60px 60px;}
#icon8{background:url(../images/SVG/bullet-audience.svg) no-repeat left top; background-size: 60px 60px;}
#icon9{background:url(../images/SVG/bullet-sun.svg) no-repeat left top; background-size: 60px 60px;}
#icon10{background:url(../images/SVG/bullet-ripple.svg) no-repeat left top; background-size: 60px 60px;}

p{
	line-height: 2.0em;
	font-weight: 300;
	font-size: 1.5em;
	font-style: normal;
	font-family: open-sans;
	margin-bottom: 2em;
}

h1{margin-top: 0;}
.clear{clear: both}

a{ color: #1b75bc;}
.related-btn{padding: 10px 20px; background-color:#1b75bc; border-radius: 30px; font-size: 1.5em; font-weight: bold; color: white; }
.related-btn:hover, .related-btn:active {text-decoration: none; color: white;}


@media (max-width: 767px) {
	.related-btn{font-size: 1em;}
	p{line-height: 1.8em; font-size: 1em;}
	.bottom-text{font-size: 1.5em;}
	.top-header1,.top-header2{font-size: 1.5em;}
	.ripple-dot,.dot-icon{font-size: 1em;}
	.intro-text {position: relative; font-size: 1.1em; padding:15px 15px 30px; margin: 0; }
}
@media (min-width: 768px) and (max-width: 991px) {
  
}

@media (min-width: 992px) and (max-width: 1199px) {
  
}

@media (min-width: 1200px) {
  
}


.test {
  
  position: absolute;
  left: 0;
  bottom: 0;
}

@keyframes MoveUpDown {
  0% {
    bottom: 10px;
  }
  50% {
    bottom: 20px;
  }
  100% {
    bottom: 10px;
  }
}