/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	width: 100%;
	overflow: hidden;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/*-------global styles-------------------------------*/
/*---------------------------------------------------*/
html{
	font-size:15px;
	font-family:arial, helvetica, sans-serif;
	color:#403a31;

}

body{
	overflow:hidden;

}

@font-face {
		font-family: 'Jrhand';
		src: url('../fonts/jr!ha___.eot');
		src: url('../fonts/jr!ha___.eot?#iefix') format('embedded-opentype'),
url('../fonts/jr!ha___.woff') format('woff'),
url('../fonts/jr!ha___.ttf') format('truetype'),
url('../fonts/jr!ha___.svg#jr!ha___') format('svg');
		font-weight: normal;
		font-style: normal;
}

h1, h2, h3, h4, h5{
	font-family: 'Jrhand', arial, helvetica, sans-serif;
}

/*-------structural styles---------------------------*/
/*---------------------------------------------------*/

#main{
	width:1200px;
	margin:20px auto;
	position:relative;
}


/*-------header  styles-----------------------------*/
/*--------------------------------------------------*/
h1#logo {
	margin-left:150px;
}

h1#logo a{
	display:block;
	width:180px;
	height:130px;
	overflow:hidden;
	text-indent:-9999em;
	background:url('../images/hynes_logo.png') no-repeat;
}

h2{
	font-size:44px;
	margin-top:25px;
	text-align:center;
}
h3{
	font-size:30px;
	margin-bottom:20px;
}
#switch{
	z-index:99;
	position:absolute;
	top:-25px;	
	left:50%;
	width:203px;
	height:166px;
	background:url('../images/back_to_website.png') no-repeat right bottom;
}

#switch a {
	text-indent:-999em;
	width:39px;
	display:block;
	height:166px;
	background:url('../images/static_switch.png') no-repeat 0 0  ;

}
#switch a:hover{
	background:url('../images/static_switch.png') no-repeat 0 3px  ;
}

#switch_on_container:hover {
	background-position-y: 3px;
	cursor:pointer;
}




/*-------section styles-----------------------------*/
/*---------------------------------------------------*/

img#clock {
	position:absolute;
	top:4px;
	left:152px;
	z-index:1;
}

img#animate_time {
	position:absolute;
	top:103px;
	left:234px;
	z-index:1;
}

img#animate_people {
	position:absolute;
	top:141px;
	left:65px;
		z-index:1;
}

img#animate_outsource{
	position:absolute;
	right:44px;
	top:124px;
		z-index:1;
}

img#animate_technology {
	position:absolute;
	top:131px;
	right:53px;
		z-index:1;
}


#animations li a{
	display:block;
	text-indent:-9999em;
		z-index:2;
}
#animations a{
	cursor:default;
}

#animations.allow_hover a:hover{
	cursor:pointer;
}


li#section_time {	
	position:absolute;
	display:block;
	width:344px;
	height:165px;
	top:120px;
	left:-70px;
	background:url('../images/static_time.png') no-repeat  0 0;
}
li#section_time a{
position:absolute;
top:0;	
left:0;
	display:block;
	width:100%;
	height:100%;
	background:none;
		z-index:99;
}

.allow_hover li#section_time a:hover{	
	background:url('../images/hover_time.png') no-repeat  left bottom;
}

li#section_outsource {
	position:absolute;
	display:block;
	width: 458px;
	height: 330px;
	top: 290px;
	right: -90px;
	background:url('../images/static_outsource.png') no-repeat 40px bottom;
}

li#section_outsource a{
position:absolute;
top:0;	
left:0;
	display:block;
	width:100%;
	height:100%;
	background:none;
	z-index:99;
}


.allow_hover li#section_outsource a:hover{
	background:url('../images/hover_outsource.png') no-repeat right 20px;
}

li#section_people{
	position:absolute;
	display:block;
	top:290px;
	width:400px;
	height:320px;
	left:-35px;
	background:url('../images/static_people.png') no-repeat 0 bottom;
}
li#section_people a{
position:absolute;
top:0;	
left:0;
	display:block;
	width:100%;
	height:100%;
	background:none;
	z-index:0;
}

.allow_hover li#section_people a:hover{
	background:url('../images/hover_people.png') no-repeat left 35px;
}


li#section_technology {
	top:40px;
	position:absolute;
	width:290px;
	height:359px;
	right:0;
	display:block;
	background:url('../images/static_technology.png') no-repeat 0 bottom;
}

li#section_technology a{ 
	position:absolute;
	top:0;	
	left:0;
	display:block;
	width:100%;
	height:100%;
	z-index:10;
	
}


.allow_hover li#section_technology a:hover {
	background:url('../images/hover_technology.png') no-repeat right top;
}


/*-------video container styles----------------------*/
/*---------------------------------------------------*/

#video_container {
	width:613px;
	padding:20px 35px;
	height:360px;
	overflow:hidden;
	background:url('../images/video_holder.png') no-repeat;
	position:absolute;
	top:200px;
	left:50%;
	margin-left:-330px;
}


/*-------content box styles--------------------------*/
/*---------------------------------------------------*/

#contain{
	position:absolute;
	top:30px;
	right:-100%;
	width:960px;
	height:720px;
	display:none;
	background:url('../images/layout_content.png') no-repeat;

}
#close a{
	right:100px;
	position:absolute;
	top:100px;
	width:40px;
	height:40px;
	display:block;
	text-indent:-9999em;
	overflow:hidden;
}

.content {
	padding:170px 170px 100px 170px;
}

#content_time, #content_people, #content_outsource {
	display:none;
}


.content p{
	margin-bottom:12px;
	line-height:1.2;
}

.content ul {
	list-style-type:disc;
	list-style-position:inside;
	margin-bottom:12px;
	margin-left:10px;
	line-height:1.2;
}

.content li{
	margin-bottom:10px;
}

div.final-technology{
	width:236px;
	height: 223px;
	display: block;
	position: absolute;
	right: -58px;
	top: 162px;
	background:url('../images/final-technology.png') no-repeat;

}

div.final-outsource{
	width:366px;
	height: 195px;
	display: block;
	position: absolute;
	right: -145px;
	top: 405px;
	background:url('../images/final-outsource.png') no-repeat;

}

div.final-people{
	width:347px;
	height: 313px;
	display: block;
	position: absolute;
	left: -137px;
	top: 282px;
	background:url('../images/final-people.png') no-repeat;

}

div.final-price{
	width:195px;
	height: 196px;
	display: block;
	position: absolute;	
	left: -57px;
	top: 114px;
	background:url('../images/final-price.png') no-repeat;

}

div.social {
  position: absolute;
  right: 0px;
  bottom: 0px;
  background-image: url('../images/social-rhb-background.png');
  background-repeat: no-repeat;
  width: 89px;
  height: 207px;
  pointer-events: auto;
}
div.social > ul {
  margin: 0;
  list-style-type: none;
}
div.social > ul > li {
  position: absolute;
}
div.social > ul > li > a {
  background-image: url('../images/social-sprites.png');
  background-repeat: no-repeat;
  width: 34px;
  height: 34px;
  font-size: 0px;
  display: block;
}
div.social > ul > li.contact {
  top: 110px;
  right: 10px;
}
div.social > ul > li.contact > a {
  background-position: 0px 0px;
}
div.social > ul > li.contact > a:hover {
  background-position: 0px bottom;
}
div.social > ul > li.linkedin {
  top: 160px;
  right: 10px;
}
div.social > ul > li.linkedin > a {
  background-position: -73px 0px;
}
div.social > ul > li.linkedin > a:hover {
  background-position: -73px bottom;
}


.visible-phone { display:none; }

@media all and (max-width: 767px) {
	
	.hidden-phone { display:none !important; }
	.visible-phone { display: block !important; }
	
	#mobile-container {
		position:fixed;
		overflow: auto;
		width:100%;
		height:100%;
		background:#d8c1a4 url('../images/background.jpg') top center no-repeat;
		background-size: 1000px 650px;
	}
	
	#mobile-container h1#logo { margin-left:20px; height:100px; }
	#mobile-container h2 { font-size:28px; margin-top:0; margin-bottom:2px; text-align:center; }
	
	#mobile-container .mobile-video-container { 
		width:100%; 
		padding:6px 0 16px 0;
		margin:0 auto; 
		background:url('../images/mobile-video-holder.png') top center no-repeat; 
	}
	#mobile-container .mobile-video-iframe-container {
		width:320px;
		height:180px;
		margin:0 auto;
	}
	
	#mobile-container .content { 
		display:block !important; 
		padding:20px 20px 20px 20px;
	}
	#mobile-container .content img.center {
		display:block; margin:0 auto; max-width:280px;
		padding-bottom:20px;
	}
	
}