body {
      font: 400 15px Lato, sans-serif;
      line-height: 1.8;
      color: #818181;
	  height: 100%;
	  width: 100%;
	  margin: 0;
	  padding: 0;
	  left: 0;
	  top: 0;
	  font-size: 100%;
  }
 h2 {
      font-size: 25px;
      text-transform: uppercase;
      color: #303030;
      font-weight: 600;
      }  
 h3 {
  font-size: 20px;
  color: blue;
}  
 h4 {
      font-size: 18px;
      line-height: 1.375em;
      color: #303030;
      font-weight: 400;
      text-align: Center;
       } 
 p {
  font-size: 16px;
  font-weight: 200;
  text-align: Center;
  line-height: 1.8; 
} 
 ul {
    list-style-type: disc;
    font-size: 14px;
    text-align: left;
    }
.text-center {
	text-align: center;
}
.text-left{
    text-align: left;
}
.text-justify {
      text-align: justify;  
      border-bottom: 1px solid #f4511e;
  }
 @media screen and (max-width: 900px) {
 h2 {
  font-size: 20px;
            }  
 h3 {
  font-size: 16px;
}  
 h4 {
   font-size: 16px;
   }
   p {
   font-size: 14px;
  } 
  ul {
    font-size: 12px;
    
    }
   }
  
.section {
	  color: black;
         }
.container-fluid {
      padding: 50px 20px; 
	  text-decoration: none;
       }
.container-fluid2 {
      padding: 0px 50px; 
	  text-decoration: none;
       }
.bg-grey {
      background-color: #f4f4f2;	
  }       
   
.nav_banner {			         
    position: fixed;
    top: 0;
	list-style-type: none; 
	margin: 0;	
	/*	border: 1px solid black;   /* Look up Margin, Border, Padding & content on CSS */
	padding-top: 0px;
	padding-bottom: 1px;
	background-color: #336699;   /*#9e918c;	   /* #f4511e */
	width: 100%;	               /* 100% of the width of its parent, in this case the page */
	margin-left: auto;	       /* aligns the nav bar left right, it then auto locates on different size screens */
	margin-right: auto;	       /* aligns the nav bar left right, it then auto locates on different size screens */
	font-family: arial;	           /* Text defined here for entire div, but could be in navbar*/
	z-index: 100;
    display: flex;
    justify-content: space-around;
    } 
.nav_banner img{
      padding:5px 5px;
  }
.unseen{
    visibility: hidden;
}
.navbar {				
	list-style-type: none; 
    margin: 10px 5px;
    background-color: #336699;  
    z-index: 101;		
    border: 0;
    font-size: 10px;
    letter-spacing: 4px;
    border-radius: 0;
    display: flex;
        }
 nav a {		
    text-align: center;
	padding: 10px 10px;
	padding-top: 4px;
	padding-bottom: 4px;	
    margin: 5px;	
	text-decoration: none;
	color: #fff;		
	background-color: #336699; 
        }  
 nav a:hover {	
     color: #f4511e ;
     background-color: #fff ;
	 text-decoration: none;
	}	
 nav a.active {
	 color: #f4511e ; 
     background-color: #fff ;
	 text-decoration: none;	
	}		
 .navbar .icon {
    display: none;
}
[data-icon]:before {
  font-family: icons; 
  content: attr(data-icon);
  speak: none; 
}
/* When the screen is less than 900 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
  @media screen and (max-width: 900px) {
 .navbar a {display: none;}    /* :not(:last-child)  */
 .navbar a.icon {
    float: right;
    display: block;
    font-size: 20px;
    padding: 1px;
    margin: 1px;
  }
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 900px) {
 .navbar.responsive {
     position: relative; 
     flex-direction: column;
      } 
     
  .navbar.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
    
      }
  
  .navbar.responsive a {
    /*float: left; */
    display: flex;
    text-align: left;
    flex-direction: column;
         
  }
  }
 header {
  height: 380px;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
  position: relative;
}
.group {
  position: absolute;
  width: 100%;
  bottom: 50px;
  margin: 0 auto;
  text-align: center;
  border-radius:10px;
}
.row {
	display: grid;
	grid-gap: 2px;
	grid-template-columns: auto auto auto;
	padding: 2px; 
    margin: 2px ;
      }
.row2 {
	display: flex;
	padding: 2px; 
    margin: 2px;
      }
  
  .col-sm-4 {
	 text-align: center;
      margin: 10px;
      width:auto;
           } 
  .col-sm-5 {
     text-align: center;
     padding: 10px 60px 10px 60px;
     margin: 5px; 
     display: flex;
     align-items: center;
     justify-content: center;
        } 
  .col-sm-5 img {
	 text-align: center;
     align-items: center;
     justify: center;
       } 
  .col-sm-6 {
	text-align: center;
    margin: 5px 0; 
  } 
/*.col-sm-7 {
	  float:left;
      width: 60%;
      text-align: center;
      margin: 1px 0; 
  } */
  .col-sm-8 {
	  padding: 10px 60px 10px 60px; 
      text-align: center; 
      margin: 5px;
	      
  }
  .col-sm-10 {
	  padding: 1px;
      font-size: 30px;
      width: 100px;
          
	} 
  .col-sm-12 {
	  padding: 0px;
      width:auto;
         }
  
   form-group {
		margin-right: 1px;
		margin-left:  1px;		
    }
  .form-control {
		width: 300px;
	    margin-right: 10px;
		margin-left:  10px; 
   } 
  .btn {
	 text-align: Center; 
  }
  .btn-default{
	  
  }
   @media screen and (max-width: 768px) {
    .btn-lg {
        width: 100%;
        margin-bottom: 35px;
    }
  }
  .pull-right  {
        margin-left: auto;
  }
  .pull-left  {
        margin-right: auto;
  } 
  
  .footer_style {
  display: flex;    
  color: white;  
  text-decoration: none;
  text-align: center;
  background: #9e918c;
  border-top: 1px solid black;
  padding: 20px 100px;
  font-size: 14px;
  }
  .footer_style elems{
    margin: 10px;
    padding:10px;
}
  .footer_text {
  color: white;  
  text-decoration: none;
  text-align: center;
  padding: 2px;
  white-space: pre;
 }
  .fa {
    font-family: Arial,
         "Helvetica Neue",
         Helvetica,
         sans-serif;
         }
  .spacing {
	  display:inline-block;
	  margin:10px
  } 
  .top{
      font-size:40px;
      text-decoration: none;
}
  
 @media screen and (max-width: 900px) {
   header {
        height: 340px;}
   
   .thumbnail{
       width:auto;
       height: 120px;
   }
   
   .thumbnail2{
       width: 250px;
       height: 200px;
   }
   
   .stack  {
     display: block;
     text-align:center;
   }
    
   .footer_style {
    flex-direction: column;
    }

 }
  
 @media screen and (max-width: 650px) {
   header {
   height: 280px;  }  
    
    .group {
    bottom: 25px;
        }
        
    .logo{
      width: 300.4px;
      height: 79.9px;     
    }    
    
 .row  {
     display: block;
     text-align:center;
   }
   
   
   
  } 
 
 /*<?php

if($_POST["submit"]) {
    $recipient="sales@sapphireresearch.com";
    $subject="Form to email message";
    $sender=$_POST["name"];
    $senderEmail=$_POST["email"];
    $message=$_POST["comments"];

    $mailBody="Name: $sender\nEmail: $senderEmail\n\n$message";

    mail($recipient, $subject, $mailBody, "From: $sender <$senderEmail>");

    $thankYou="<p>Thank you, Your message has been sent.</p>";
}?>*/