@charset "utf-8";
.LoupImages {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}

/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 30%;
  padding: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}.footerlinks {
	color: #FFFFFF;
}

/* Three image containers (use 25% for four, and 50% for two, etc) */
.column2 {
  float: left;
  width: 45%;
  padding: 5px;
}

/* Clear floats after image containers */
.row2::after {
  content: "";
  clear: both;
  display: table;
}.footerlinks {
	color: #FFFFFF;
}

.responsive {
  width: 100%;
  height: auto;
}

/* menu code start */

/* The navigation menu */
.navbar {
  overflow: hidden;
  background-color: #333;
}

/* Navigation links */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The subnavigation menu */
.subnav {
  float: left;
  overflow: hidden;
}

/* Subnav button */
.subnav .subnavbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Add a red background color to navigation links on hover */
.navbar a:hover, .subnav:hover .subnavbtn {
  background-color: #61A7E1;
}

/* Style the subnav content - positioned absolute */
.subnav-content {
  display: none;
  position: absolute;
  center: 0;
  background-color: #61A7E1;
  width: 100%;
  z-index: 1;
}

/* Style the subnav links */
.subnav-content a {
  float: center;
  color: white;
  text-decoration: none;
}

/* Add a grey background color on hover */
.subnav-content a:hover {
  background-color: #eee;
  color: black;
}

/* When you move the mouse over the subnav container, open the subnav content */
.subnav:hover .subnav-content {
  display: block;
}

/* menu code end */


/* hero image */
body, html {
    height: 100%;
}

/* The hero image */
.hero-image {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/camerasystems-banner.jpg");

  /* Set a specific height */
  height: 200;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Place text in the middle of the image */
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}



.indexpadding {
	padding: 10px;
}

/* Contact Form start */
#last{ 
	width: 100%; 
	height: auto; 
	justify-content: center; 
	
	} 
	.full{ 
	width: 80%; 
	display: inline-block; 
	margin:2%; 
	margin-left: 10%; 
	text-align: center; 
	} 
	.full h3{ 
	font-size: 2rem; 
	display:block; 
	margin: 2%; 
	margin-bottom: 0; 
	} 
	.lt{ 
	padding: 2%; 
	margin: 2%; 
	} 
	.rt{ 
	padding: 2%; 
	margin: 2%; 
	} 
	.lt textarea{ 
	width: 94%; 
	margin-left: 2.8%; 
	} 
	button{ 
	margin: 2%; 
	} 
	.btn-primary{ 

	} 
	.list-item{ 

	list-style-type: none; 
	} 
	.list-item span{ 
	margin-left: 10px; 
	font-size: 1.4rem; 
	} 
	.list-item a{ 

	display: inline-block; 
	} 
	.list-item a:hover{ 
	text-decoration: underline; 
	} 
	.form-control{ 
 
	} 
		
	@media screen and (min-width: 770px){ 
	.full{ 
		width: 70%; 

	} 
	.lt textarea{ 
	width: 95%; 

	} 
	} 
		
	@media screen and (min-width: 1100px){ 
	.full{ 
		width: 65%; 

	} 
	.lt{ 
		width: 55%; 
		display: inline-block; 
		float: left; 
		margin-right: 0; 
	} 
	.rt{ 
		width: 35%; 
		display: inline-block; 
		margin-left: 0; 
	} 
	.list-item{ 

	} 
	.contact-list{ 

	} 
	.fa-envelope, .gmail{ 
		display: inline-block; 
		width: auto; 
	} 
	}
/* Contact Form end */