﻿
@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,700,300");


body{
	
	font-family: 'Open Sans',Arial, Helvetica, sans-serif;
 	font-weight:400;
 	font-size:12px;
 	line-height:1.6em;
	color:#101010;
	/*width:980px;*/
	min-width:360px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	background-color:#F0F0F0;
	overflow:scroll;
	background:url(../images/background-silver7.jpg) repeat top; background-size:100%;
	
}

/*
@media only screen and (min-width: 360px) {
    body { font-size:12px; }
}
*/

@media only screen and (min-width: 736px) {
    body { font-size:12px; }
    
}

@media only screen and (min-width: 1024px) {
    body { font-size:14px; }
    
}

@media only screen and (min-width: 1100px) {
    body { font-size:16px; }
    
}

@media only screen and (min-width: 1800px) {
    body { font-size:18px; }
    
}




a:link
{
	color:#26579B;
	
	}


.showme{display:inherit;}
.show_sm_scrn{display:none;}


.pagebox { 
	margin-top:50px;
/*	border:solid 1px #888888; 
	border-radius:6px; 
	box-shadow: 1px 1px 2px 3px #dddddd; 
 	-moz-box-shadow: 1px 1px 2px 3px #dddddd; 
 	-webkit-box-shadow: 1px 1px 2px 3px #dddddd; 
	width:100%;
	background-color: #fff;
	*/
	
}   


ul { margin: 0; padding: 0; }
ul li {float:left;} /* Fixes IE9 compatibility mode (staircase)*/

#awards_col ul li{float:none; list-style-type:disc;}

hr{ margin-top:4px; margin-bottom:4px; width:80%; }

p{padding-top:2px;}
.txt_col{width:33%; float:left;}
.two_col{width:50%; float:left;}


               
 .fnt1e_overlay{
 	font-family: 'Open Sans';
 	font-weight:100;
 	font-size:3.000em; 
 	color:#fff;
    top:20%; 
    padding:6px 4px 6px 4px;
    line-height:1.3em; 
    text-align:center;
}
                           
   
		

.heading1{
	font-size:2.0em; 
	font-weight:bold;
	line-height:1.3em;
}

.heading2{
	font-size:1.5em; 
	line-height:1.3em;
	font-weight:bold;
}

.heading3
{ font-size:1.2em; 
	line-height:1.3em;
	font-weight:bold;
}
	
.product_text{font-size:1.2em; padding:0px 20px 0px 20px; text-align:left;}

.hmx_logo{
	border:0px; 
	height:50px;
	padding-right:16px;
	padding-left:10px;
	padding-top:4px;
}


.navbar {
	overflow: hidden;
	background-color:#e5e5e5;
	position: fixed; /* Set the navbar to fixed position */
	top: 0px; /* Position the navbar at the top of the page */
	width: 100%; /* Full width */
	z-index:1;
  }


.menu{
	padding:32px 12px 10px 12px;
    text-decoration:none;
    font-size:1.4em;
    color:Black;
   /* background-color:#F6F6F6;*/
    position:relative; 
    float:left;
 }
 .menu:link
 {
 	color:Black;
 	
 	
 	}
 
 /*.menu:hover{color:#dd0000;}
 .menu:focus{color:#26579B;}*/
 

 

           
.menu_sel	{
	padding:32px 12px 10px 12px;
	text-decoration:none;
	font-size:1.5em;
	color:#B00C23;
	background-color:#F6F6F6;
	position:relative; 
	float:left;
}
.menu_sel:link{color:#B00C23;}
				
.spacer_panels{padding-bottom:20px; padding-top:20px;   }
			
.spacer_pg_top{
	padding-top:20px; /*position:relative; Creates a Menu problem for FireFox */ 
} 


.spacer_pg_bottom{
	padding-top:20px;
}


.cellpad{padding-left:20px; padding-right:20px; width:20%;} 




.triangle{font-size:1.5em; vertical-align:bottom;   }
.media_icons{padding:0px 2px 0px 2px;
             border:none;
             height:48px;  }
             
 .share_icons{padding:0px 2px 0px 2px;
             border:none;
             height:48px;  }
             
.awards_group{width:calc(100%/7); float:left; margin:0px;}
.awards_group_double{width:20%; float:left; margin:0px;}
.award_img{width:85%; max-width:100%;}
.logo_product{width:35%;}
.data-src{width:80%; max-width:100%; }
.tile-group{
	width:33%; 
	float:left; 
	padding:0 3% 0.5in 3%; 
	font-size:1.0em; 
}
          
/* #maincontent {padding:20px 30px 20px 30px; text-align:left;}   Inside the bounding pagebox */
#maincontent {padding:20px 30px 20px 30px; text-align:left;} 
#copyright   {font-size:75%; color:#444444; padding-top:10px; line-height:1.4em; }  
#img_office {padding-top:0px; width:100%;}
/*#play_img{width:182px;}*/
#vid_iframe{width:640px; height:360px;}
span.nobr {white-space:nowrap;}


#press_col	{width:50%; float:left; text-align:left; padding-right:40px;}
#news_col	{width:50%; float:left; text-align:left; padding-right:40px;}
#events_col	{width:50%; float:left; text-align:left; padding-left:40px;}
#awards_col	{width:50%; float:left; text-align:left; padding-left:40px;}
#awards_col li{padding-top:10px; }
#contact_col{width:50%; float:right; padding-left:60px;}

.testbox{width:8px; height:8px; background-color:purple; border:1px black solid;}

/* --------------------------------------------------
	Small Screen Tailoring 
	-Add in <head>:
		<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=5.0" /> 
	-Minimize some margins
	-Change body width to a percentage
  -----------------------------------------------------
*/ 

 @media (orientation:portrait) and (max-device-width:800px)
/* @media (orientation:portrait)*/
{
	body{width:96%;}
	.menu{padding:32px 10px 10px 10px;}
	.men_sel{padding:32px 10px 10px 10px;}
	#img_features{padding:0px 0px 0px 60px;}
	.two_col{width:40%;}
	.noshow_sm_scrn{display:none;}
    .show_sm_scrn{display:inherit;}
    .award_img{width:100px;}
	.testbox{ background-color:cyan;}
 
	
}


  
  /* iPhone 6s width 375px, iPhone 7+ width is 414px, moto 1 ace 432 iPhonex 563px */
@media only screen and (max-width: 565px)
{
  body {
  	-webkit-text-size-adjust: none; /* Prevents font substitution on small screens */
    width:97%;
    min-width:100%;
    color:#000;
    font-size:14px;
   }
   
	.spacer_pg_top{
		padding-top:20px; /*position:relative; Creates a Menu problem for FireFox */ 
	}
	
	 
   .menu{
   		padding:4px 4px 10px 5px;
        text-decoration:none;
        font-size:1.0em;
        /*background-color:#F6F6F6;*/
        position:relative; 
        float:left;
    }
    
    /*.menu:hover{color:#26579B;}
    .menu:focus{color:#26579B;}*/
    
	.menu_sel{
		padding:4px 4px 0px 5px;
		text-decoration:none;
		font-size:1.0em;
		font-weight:normal;
		color:#CD181F;
		position:relative; 
		float:left;
	}
				
	.hmx_logo{
		border:0px; 
		height:32px; 
		padding-right:4px;
	}
	
	.fnt1e_overlay 
	{
		font-size:1.285714em; 
		line-height:1.00em; 
		top:5%; 
		 }

	.heading1{
		font-size:1.2em; 
		font-weight:bold;
	}
	
	.heading2{
		font-size:1.1em; 
		font-weight:bold;
	}
	
	.heading3{
		font-size:1.000em; 
		font-weight:bold;
	}
	
	
	.product_text{font-size:1.0em; padding:6px 0px 0px 0px; }
	.logo_product{width:70%;}
	

   p{
   		padding:6px 0px 0px 0px;
   	}
  
   .txt_col{width:100%;}
   .two_col{width:100%; clear:both;}
   
   
   .showme{display:none;}
   .media_icons{display:none;}
   .share_icons{height:48px;  }
   .triangle{font-size:1.0em; }
   .noshow_sm_scrn{display:none;}
   .show_sm_scrn{display:inherit;}
   .awards_group{width:33%;  text-align:center; }
   .awards_group_double{width:100%;  text-align:center; }
   .award_img{width:90%;}
   
   .data-src{width:100%; max-width:100%; }
   .tile-group{width:100%;}
   
 
   #maincontent {padding:8px 14px 8px 14px; }  /* Inside the bounding pagebox */
   #img_office {padding-top:0px; width:100%;}
   #play_img{width:62px;}
   #vid_iframe{width:280px; height:158px;}
   
   
   #news_col	{width:100%;  text-align:left; padding:0px;}
   #events_col	{width:100%;  text-align:left; padding:0px;}
   #press_col	{width:100%;  text-align:left; padding:0px;}
   #awards_col	{width:100%;  text-align:left; padding:0px;}
   #awards_col li{padding-top:15px;}
   #awards_col ul{padding-left:12px;}
   #contact_col{width:100%;  padding-left:0px;}
   
   .testbox{ background-color:lime;}
   
}/* end media 480 */



