body{
background-color: whitesmoke;
  font-family: 'Open-sans',sans-serif;
  font-size: 1em;
  line-height: 1.5em;
  margin: 0;
  padding: 0;
}
.container2{
 margin: auto;
 width: 80%;
  }

.container{
  margin: auto;
}
.container3{
margin-right: 10%;
}

button {
padding: 20px;
margin-bottom: 20px;
}

img {
  display: block;
  width: 70%;
  margin: auto;
}
.caption {
  padding: 0.8em;
  text-align: center;
}

/* Common Classes */

.primary-text{
  color: #56a79a;
}

.primary-background{
  background: #56a79a;
}


/* Header */
#main-header{
  border-bottom: 5px solid black;
}

#header {
  padding: 0.8rem;
  text-align: center;
  background: #333;
  color: #fff;
}

#header h2 {
  border-left: dotted 1px #fff;
  border-right: dotted 1px #fff;
  display: inline-block;
  padding-right: 1.0em;
  padding-left: 1.0em;
}

main {
  max-width: 900px;
  margin: auto;
  box-shadow: 30px 0px 40px rgba(0, 0, 0, 0.2),
    -30px 0px 40px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
}

main ul li{
  list-style: none;
  padding: 10px;
}

/* Showcase */
#banner{
  background: url('../images/logoSml.png') no-repeat;
  background-size: 100% 100%;
  border-top: 3px solid black;
  border-bottom: 3px solid #000;
  margin-bottom: 10px;
}

#banner .row{
  height: 150px;
}

/* Navbar */

#navbar{
  text-transform: uppercase;
  font-size: 1em;
  margin-bottom: 5px;
}

#navbar li{
  display: inline;
  line-height: 2.5em;
  padding: 25px;
  list-style: none;
}

#navbar a{
  text-decoration: none;
  color: #888;
}

#navbar li.current a, #navbar a:hover{
  color: #56a79a;
  border-bottom: 3px solid #56a79a;
  padding-bottom: 1px;
}

/* Advert */
#intro{
border-top: 3px solid black;
}

#advert h1, h2, h3{
text-align: center;
width: 80%;
}

#advert p{
 text-align: center;
 margin: 25px 20px;
}

#subheader{
  background: #555;
  color: #fff;
}

#subheader ul li{
  display: inline;
  padding-right: 40px;
  list-style: none;
}

/* Contact */
.contact form{
  background: #333;
  color: #fff;
  padding: 20px;
}

.contact form input[type="text"]{
  width: 50%;
  height: 30px;
  margin-bottom: 10px;
}

.contact form textarea{
  width: 50%;
  height: 100px;
  margin-bottom: 10px;
}

.contact form button{
  text-transform: uppercase;
  font-size: 1.2em;
  height: 45px;
  width: 100px;
  padding: 10px 20px;
  border: 3px solid dark-gray;
  background: gray;
  color: #fff;
}

.contact form label{
  text-transform: uppercase;
}

/* customer list */

#customerlist {
  text-transform: uppercase;
  font-size: 1em;
  margin-bottom: 5px;
}

#customerlist li{
  display: inline-block;
  padding: 10px;
  line-height: 1.5em;
  list-style: none;
}

/* topbox */

#topbox{
	border-top: 3px solid black;
  background: -webkit-linear-gradient(bottom left, #919196, #222525);
   background: -o-linear-gradient(bottom left, #919196, #222525);
   background: linear-gradient(to top right, #919196, #222525);
}

.real{
	color: white;
	padding-top: 20px;	
}

.text p{
color: whitesmoke;
text-transform: uppercase;
padding: 15px;
margin:15px 10px;
}

.text{
border: solid 3px red;
} 
 
/* midbox */ 
 
#midbox{

	
height: 100%;
}

.midleft img{
height: 150px;
width: 150px;
margin: 30px 40%;
  box-shadow: 30px 0px 40px rgba(0, 0, 0, 0.2),
    -30px 0px 40px rgba(0, 0, 0, 0.2);
}

.midright img{
height: 150px;
width: 150px;
margin: 30px 30%;
  box-shadow: 30px 0px 40px rgba(0, 0, 0, 0.2),
    -30px 0px 40px rgba(0, 0, 0, 0.2);
}

/* info
background: #333 url('../images/info-bg.jpg') no-repeat;
 */
#info{
  background: green;
  margin: auto;
  box-sizing: border-box;
  color: orange;
  padding: 25px 0px;
}

#info h2{
  font-size: 35px;
  margin: 0;
  padding-bottom: 10px;
}

#info ul{
  list-style: none;
  padding: 0;
}

#info li{
  line-height: 2em;
  font-size: 20px;
}

/* Company */


 #company{
  background: #555;
  color: #fff;
  padding: 10px 0;
}

#company h4{
  text-transform: uppercase;
  margin-bottom: 0;
}

#company ul{
  padding: 0;
  list-style: none;
  line-height: 2em;
}

#company input[type="text"]{
  padding: 7px;
  height: 15px;
}

#company button{
  background: #222;
  color: #fff;
  padding: 10px;
  border: 0;
}

/*  software  */

.softwt1{
border: 2px solid;
margin: 25px;
padding: 0px;
background-color: lightgray;
box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.2), 10px 10px 20px rgba(0, 0, 0, 0.2);
}

.softwt2{
border: 2px solid;
margin: 25px;
padding: 0px;
background-color: lightgray;
box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.2), 10px 10px 20px rgba(0, 0, 0, 0.2);
}

.softwt3{
border: 2px solid;
margin: 25px;
padding: 0px;
background-color: lightgray;
box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.2), 10px 10px 20px rgba(0, 0, 0, 0.2);
}



/* Footer
 background: url('../images/info-bg.jpg') repeat;
*/
.iconlarge1{
border: 2px solid;
margin-left: 15px;
padding: 0px;
background-color: lightgray;
box-shadow: -15px 10px 20px rgba(0, 0, 0, 0.2), 15px 10px 20px rgba(0, 0, 0, 0.2);
}

.iconlarge2{
border: 2px solid;
margin-right: 15px;
padding: 0px;
background-color: lightgray;
box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.2), 10px 10px 20px rgba(0, 0, 0, 0.2);
}


#main-footer{
 background: lightgray;
 /*  background: #56a79a; */
  color: #000;

}

/* Page */
#page{
	text-align: center;
  margin: 30px;
}

.
/* Services */
.services ul li{
  list-style: none;
  padding: 10px;
}

.services ul li:nth-child(odd){
  background: url('../images/gwide.jpg') repeat;
  /* background: #333; */
  color: #fff;
}

.services ul li:nth-child(even){
  background: #56a79a;
  color: #fff;
}
.mission ul li{
  list-style: none;
  padding: 10px;
 }

/* Subheader */

#subheader{
  background: #333;
  color: #fff;
}


/* Media Queries */

@media (max-width:992px) {
   #showcase .row{
     height: 110px;
   }
}

@media (max-width:500px) {
	
video{
height: 240px;
width: 320px;
margin-left: 0;
}
	
#showcase .showcase-content{
font-size: 20px;
padding: 15px;
}
  .midleft img{
height: 80px;
width: 80px;
margin: 20px;
}

.midright img{
height: 80px;
width: 80px;
margin: 20px;
}
}