.ui-page{
  background: url(images/background-dark-blend.jpg) no-repeat center 63% fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

img{width: 100%; display: block;}

#hei-design-logo{
  display: block;
  text-indent: -9999px;
  width: 460px;
  height: 224px;

  background-size: 460px 224px;
  float: left;
}
#hei-digital-logo{
  display: block;
  text-indent: -9999px;
  width: 460px;
  height: 224px;

  background-size: 460px 224px;
  float: right;
}
#creativity{
	display: block;
  text-indent: -9999px;
  width: 460px;
  height: 224px;

  background-size: 460px 224px;
  float: left;
  margin-left: 14%;
}
.container{
	width: 54%;
	/* margin: 0 auto; */
	position: fixed;
	left: 23%;
	top: 34%;
}

p{
	font-family: 'Open Sans', sans-serif;
	font-size: 14pt;
	color: #9B9B9B;
	float: right;
	font-weight: 100;
	margin-top: 10%;
	text-shadow: none;
	font-style: italic;
	position: fixed;
	bottom: 0px;
	right: 13px;
	display: none;
}
a{ text-decoration: none; color: #fff;}
span{ margin: 0 40px; padding: 0 40px; border-left: 1px solid #8BC53F; border-right: 1px solid #EB008B;}

#contact-info{
  width: 805px;
  margin: 60px auto;
}
.soon{ color:#58595B; text-align: center;}



  /*==========  Non-Mobile First Method  ==========*/

  /* Large Devices, Wide Screens */
  @media only screen and (max-width : 1200px) {

  }

  /* Medium Devices, Desktops */
  @media only screen and (max-height: 800px) {

  	#hei-design-logo{
		  display: block;
		  text-indent: -9999px;
		  width: 49%;
		  height: 207px;
		  background-size: 460px 224px;
		  /* float: left; */
		}
		#hei-digital-logo{
		  display: block;
		  text-indent: -9999px;
		  width: 46%;
		  height: 91px;
		  background-size: 460px 224px;
		  /* float: left; */
		}
		#creativity{
			display: block;
		  text-indent: -9999px;
		  
			width: 84%;
		  
			height: 30px;
		  background-size: 460px 224px;
		  float: left;
		  
			margin-left: 7%;
		
			/* margin: 0 auto; */
			margin-top: 61px;
}
		.container{
			width: 93%;
			/* margin: 0 auto; */
			position: initial;
			/* left: 7%; */
			/* top: 28%; */;
		
			/* padding: 10px; */
			float: left;
			padding: 0 24px;
			margin-top: 325px;
			/* margin-left: 87px; */
}		

  }

  /* Small Devices, Tablets */
  @media only screen and (max-width : 768px) {

  	#hei-design-logo{
		  display: block;
		  text-indent: -9999px;
		  width: 49%;
		  height: 207px;
		  background-size: 460px 224px;
		  /* float: left; */
		}
		#hei-digital-logo{
		  display: block;
		  text-indent: -9999px;
		  width: 46%;
		  height: 91px;
		  background-size: 460px 224px;
		  /* float: left; */
		}
		#creativity{
			display: block;
		  text-indent: -9999px;
		  
			width: 84%;
		  
			height: 30px;
		  background-size: 460px 224px;
		  float: left;
		  
			margin-left: 7%;
		
			/* margin: 0 auto; */
			margin-top: 61px;
}
		.container{
			width: 93%;
			/* margin: 0 auto; */
			position: initial;
			/* left: 7%; */
			/* top: 28%; */;
		
			/* padding: 10px; */
			float: left;
			padding: 0 24px;
			margin-top: 325px;
			/* margin-left: 87px; */
}			
			p{display: block;}

  }

  /* Extra Small Devices, Phones */ 
  @media only screen and (max-width : 480px) {

  }

  /* Custom, iPhone Retina */ 
  @media only screen and (max-width : 320px) {
		p{display: block;}
		#hei-design-logo{
		  display: block;
		  text-indent: -9999px;
		  width: 247px;
		  height: 107px;
		  background-size: 460px 224px;
		  float: left;
		}
		#hei-digital-logo{
		  display: block;
		  text-indent: -9999px;
		  width: 247px;
		  height: 91px;
		  background-size: 460px 224px;
		  float: left;
		}
		#creativity{
			display: block;
		  text-indent: -9999px;
		  
			width: 188px;
		  
			height: 14px;
		  background-size: 460px 224px;
		  float: left;
		  
			margin-left: 10%;
		
			/* margin: 0 auto; */
			margin-top: 64px;
}
		.container{
			width: 86%;
			/* margin: 0 auto; */
			position: initial;
			/* left: 7%; */
			/* top: 28%; */;
		
			/* padding: 10px; */
			float: left;
			padding: 0 24px;
			margin-top: 104px;
}


    #contact-info{ width: 74%; margin:11px auto;}
    #contact-info a{ padding-bottom: 10px; padding-top: 10px; display: block;}
    span{margin: 10px 0px; padding: 5px 0px;  border-left:none; border-right:none; border-top: 1px solid #8BC53F; border-bottom: 1px solid #EB008B;}
    }
  }