﻿
@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.7em;
	color:#404040;
	
	/*width:980px;*/
	width:100%;
	min-width:360px;
	text-align:center;
	margin:auto;
	
	overflow:scroll;
	/*background:url(../images/background-blue2.jpg) repeat top; background-size:100%;*/
	background-color:#f2f2f4;
	
}


@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; }
    
}

@media only screen and (min-width: 2200px) {
    body { font-size:20px;}
    
}


a:link{
	color:#26579B;
	}


.showme{display:inherit;}
.show_sm_scrn{display:none;}


.pagebox { 
	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:90%;
	background-color: #fff;
	margin:auto;
}   


.pagebox2 { 
	width:90%;
	background-color: #fff;
	margin:auto;
}   


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%; color:Silver; }

p{padding-top:2px;}
.txt_col{width:33%; float:left;}
.two_col{width:50%; float:left;}

.panel-spacer{padding-bottom:3.0em; background-color:#f5f5f5;}


.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;
}
	


.menu_logo{
	border:0px; 
	height:80px;
	padding-right:20px;
	padding-left:10px;
}




.menu{
	padding:32px 14px 10px 14px;
    text-decoration:none;
    font-size:1.4em;
    color:Black;
   /* background-color:#F6F6F6;*/
    position:relative; 
    float:left;
 }
 .menu:link{
 	color:Black;
 	}
 

        
.menu_sel	{
	padding:32px 14px 10px 14px;
	text-decoration:none;
	font-size:1.4em;
	color:#B00C23;
	position:relative; 
	float:left;
}
.menu_sel:link{color:#B00C23;}
				
.spacer_panels{padding-bottom:20px; padding-top:20px;   }
			
.spacer_pg_top{
	padding-top:0px; /*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;  
	}
	
.media_icons_upper{
	padding:0px 2px 0px 2px;
    border:none;
    height:36px;  
	}
             
 .share_icons{
	 padding:0px 2px 0px 2px;
     border:none;
     height:48px; 
	 }
   
   
   
.tile-group{
	width:33%; 
	float:left; 
	padding:0 3% 0.5in 3%; 
	font-size:1.0em; 
}	
       
/*.awards_group{width:16.66667%; float:left; margin:0px; text-align:center;} */
.awards_group{width:14.285714%; float:left; margin:0px; text-align:center;}
/*.award_img{width:70%; max-width:100%;} */
.award_img{max-width:80%; width:80%; }
.logo_product{width:35%;}
.three-phones{width:50%; max-width:100%;}
.two-phones{width:550px; max-width:100%; }
.standards{max-width:100%;  padding-top:10px; width:35em;}
.footernav{ border:none; padding:0px 10px 0px 10px;}
          
/* #maincontent {padding:10px 30px 20px 30px; text-align:left;} */
#maincontent {padding:0px 0px 20px 0px; text-align:left;} 
#copyright   {font-size:75%; color:#444444; padding-top:10px; line-height:1.4em; }  
#img_office {padding-top:0px; width:100%;}
#vid_iframe{width:640px; height:360px;}
span.nobr {white-space:nowrap;}


.btn-hero-video{ 
	position:absolute; 
	top:40%; 
	text-align:center; 
	width:100%; 
	margin-left:5%;
	
	}

.btn-hero-download{ 
	position:absolute; 
	top:70%; 
	text-align:center; 
	width:100%; 
	margin-left:5%;
	}

.btn-hero-download2{ 
	position:absolute; 
	top:85%; 
	text-align:center; 
	width:80%; 
	margin-left:34%;
	}
		


.data-src{width:100%; max-width:100%; }
.vid-btn{width:300px; max-width:100%; padding-bottom:20px; border:none;}
.video_col{width:50%; float:left; text-align:center; }
.iphone{max-width:100%; padding:0px 10px 0px 0px; width:20em;}

#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;}


/* --------------------------------------------------
	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 only screen and (max-width: 736px) {
    .fnt1e_overlay {
		font-size:1.57142857em; 
		line-height:1.00em; 
		top:5%; 
		 }
		 
    .fnt1_overlay {
		font-size:1.57142857em; 
		line-height:1.00em; 
		
		 }
	.tile-group{width:50%; float:left; }          
body{background-color:Red;}	
} 
 */
 
  
  
  /* iPhone 6s width 375px, iPhone 7+ width is 414px iPhoneX 563  */
@media only screen and (max-width: 565px)
{
  body {
  	-webkit-text-size-adjust: none; /* Prevents font substitution on small screens */
    width:100%;
    min-width:100%;
    color:#000;
    font-size:14px;
	background-color:#ffffff;
   }
   
   .pagebox{ width:100%; 
   border:none;
   box-shadow: none; 
 	-moz-box-shadow: none; 
 	-webkit-box-shadow: none; 
   
   }
	.spacer_pg_top{
		padding-top:0px; /*position:relative; Creates a Menu problem for FireFox */ 
	}
	
	 
   .menu{
   		padding:10px 4px 0px 7px;
        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:10px 4px 0px 7px;
		text-decoration:none;
		font-size:1.0em;
		font-weight:normal;
		color:#CD181F;
		position:relative; 
		float:left;
		
	}
				
	.menu_logo{
		border:0px; 
		height:50px; 
		padding-right:10px;
		padding-top:0px;
		padding:0px 4px 4px 0px;
	}
	

		 
	.heading1{
		font-size:1.2em; 
		font-weight:bold;
	}
	
	.heading2{
		font-size:1.1em; 
		font-weight:bold;
	}
	
	.heading3{
		font-size:1.000em; 
		font-weight:bold;
	}
	
	
	.logo_product{width:70%;}
	

   p{
   		padding:6px 6px 0px 8px;
   	}
  
   .txt_col{width:100%;}
   .two_col{width:100%; clear:both;}
   
   
   .showme{display:none;}
   .media_icons{display:none;}
   .media_icons_upper{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.33%;  text-align:center; }
   .award_img{width:80%;}
   .tile-group{width:100%;}
  .three-phones{width:100%;}
  .standards{padding-top:10px; width:100%;}
   #maincontent {padding:0px 10px 8px 10px; }  /* Inside the bounding pagebox */
     #maincontent {padding:0px; }  /* Inside the bounding pagebox */
	 
	 
   #img_office {padding-top:0px; width:100%;}
   #play_img{width:62px;}
   #vid_iframe{width:280px; height:158px;}
   
   .btn-hero-video{ 
	margin-left:2%;
	
	}

.btn-hero-download{ 
	margin-left:2%;
	}

.btn-hero-download2{ 
		margin-left:2%;
	}
	
   
   .vid-btn{width:100%; }
   .video_col{width:100%;  text-align:center; }

   #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;}
   
   
   
}/* end media 565 */



