/* Reset
------------------------------------------------------------ */
* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body { background:#ffffff; font-size: 13px; color: #666666; font-family: Arial, helvetica, sans-serif;}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
h1 { margin-bottom: 10px; color: #111111;}	
a, img { outline: none; border:none; color: #000; font-weight: bold; /*text-transform: uppercase;*/}
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}
img { display: block; margin-bottom: 10px;}
aside { font-style: italic; font-size: 0.9em;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display: block;
	}
	
/* Structure */
#wrapper {
	width: 96%;	
	max-width: 920px;
	margin: auto;
	padding: 2%;
} 

#main {
	width: 85%;
	margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
	}		
		
aside {
	width: 35%;
	float: right;
	}

header {	
	position: relative;
}

footer {
	width: 100%;
	height: 50px;
	bottom: 0;
	position: fixed;
	left: 0px;
	text-align: center;
	color: #ffffff;
	padding-top: 50px;
	background-color: #8c0d19;
	box-shadow: 0 0 15px #333333;
	padding-top: 10px;
}

.pfoot {
	margin-top: 15px;
	font-size: 9px;
}

p {
	font-size:12px;
	}
	

#bold {
	font-weight: bold;
}

h3{
	margin-left: auto;
	margin-right: auto;	
	color: #000;
	text-align: center;
	margin-top: 15px;
}

#home-divider {
	background-color: #3f95c4;
	width: 100%;
	height: 10px;
	margin-top: -20px;
	z-index: 9;
	position: absolute;
}

.button {
	background-color: #fff;
    border: none;
    color: #000;
    text-decoration: none;
    cursor: pointer;
	max-width: 100px;
	margin-top: 10px;
	margin-right: 10px;
	font-weight: normal;
	font-size: 12px;
	text-decoration: none;
}

.button:hover {color:#3f95c4;}
		
/* Nav */

ul.navigation
{
    background:#fff;
}
ul.navigation li a
{
    text-decoration:none;
}
ul.navigation li a.on
{
    background:yellow;
    padding:2px 6px;
}

header nav {
	float: right;
	margin-top: -80px; 
	}
	
header nav li {
	display: inline;
	margin-left: 15px;
	text-decoration: none;
	}
	
header nav li a{
	text-decoration: none;
}
	
header nav li :hover {
	color: #8c0d19;
} 

/*
#case li.case, li.case a{
  	color: #8c0d19;
	text-decoration: underline;
}

.index li.index, li.index a{
  	color: #8c0d19;
	text-decoration: underline;
}

#contact nav ul li.contact, li.contact a{
  	color: #8c0d19;
	text-decoration: underline;
}

.vision li.vision, li.vision a{
  	color: #8c0d19;
	text-decoration: underline;
}

.distributors li.distributors, li.distributors a{
  	color: #8c0d19;
	text-decoration: underline;
}

.products li.products, li.products a{
  	color: #8c0d19;
	text-decoration: underline;
}*/

/*DROP DOWN*/
nav li {
    display:inline-block;
    line-height:24px;
    position:relative;
}

nav li ul { 
	display:none; 
	z-index: 10;
	}
	
nav li:hover > ul a{
	color: #fff;
}

nav li:hover > ul a:hover{
	text-decoration: underline;
}

nav li:hover > ul {
  width: 350%;
  display:block;
  position:absolute;
  background-color: #8c0d19;
  margin-top: -5px; 
  margin-left: 35px;
  text-align: center;
  word-spacing: -1px;
  font-size: 12px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 10px;
}
/*END OF DROP DOWN*/

/**HOME PAGE**/
#logo img{
	max-width: 300px;
	width: 100%;
	margin-top: -10px;	
}

#lang{
	float: right;
	max-width: 100px;
	margin-top: 10px;
	margin-right: 10px;
}

#lang a {
	font-weight: normal;
	font-size: 12px;
	text-decoration: none;
}

#lang a:hover {color:#3f95c4;}



/**END OF HOME**/

/** VISION PAGE **/

/** END OF VISION PAGE **/


/** PRODUCT PAGE **/
#product{
	max-width: 900px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-top: 50px;
}

/*FIRST PRODUCT*/

#left {
	float: left;
}

#left img {
	max-width: 400px;
	width: 100%;
	}

#right{
	max-width: 375px;
	margin-left: 50px;
	margin-top: 100px;
	text-align: left;
	float: right;
}

#left1 {
	float: left;
	margin-top: 375px;
	margin-left: -400px;
}

#left1 img {
	max-width: 400px;
	width: 100%;
	}

#right1{
	max-width: 375px;
	margin-left: 50px;
	margin-top: 300px;
	text-align: left;
	float: right;
}

#left2 {
	float: left;
	margin-top: 530px;
	margin-left: -400px;
}

#left2 img {
	max-width: 400px;
	width: 100%;
	}

#right2{
	max-width: 375px;
	margin-left: -30px;
	margin-top: 300px;
	text-align: left;
	float: right;
}

#left3 {
	float: left;
	margin-top: 535px;
	margin-left: -400px;
}

#left3 img {
	max-width: 400px;
	width: 100%;
	}

#right3{
	max-width: 375px;
	margin-left: 50px;
	margin-top: 300px;
	text-align: left;
	float: right;
}

/*SECOND PRODUCT*/

#gauche {
	float: left;
}

#gauche img {
	max-width: 400px;
	width: 100%;
	}

#droit{
	max-width: 375px;
	margin-left: 50px;
	margin-top: 125px;
	text-align: left;
	float: right;
}

#gauche1 {
	float: left;
	margin-top: 375px;
	margin-left: -400px;
}

#gauche1 img {
	max-width: 400px;
	width: 100%;
	}

#droit1{
	max-width: 375px;
	margin-left: 50px;
	margin-top: 300px;
	text-align: left;
	float: right;
}

#gauche2 {
	float: left;
	margin-top: 570px;
	margin-left: -400px;
}

#gauche2 img {
	max-width: 400px;
	width: 100%;
	}

#droit2{
	max-width: 375px;
	margin-left: -30px;
	margin-top: 320px;
	text-align: left;
	float: right;
}

#gauche3 {
	float: left;
	margin-top: 560px;
	margin-left: -400px;
}

#gauche3 img {
	max-width: 400px;
	width: 100%;
	}

#droit3{
	max-width: 375px;
	margin-left: 50px;
	margin-top: 320px;
	text-align: left;
	float: right;
}

/** END OF PRODUCT PAGE **/


/** CASE STUDIES PAGE **/

#left-case {
	float: left;
}

#left-case img {
	max-width: 400px;
	width: 100%;
	}

#right-case{
	max-width: 200px;
	margin-left: 50px;
	margin-top: 120px;
	text-align: left;
	float: left;
}

#left-case1 {
	float: left;
	margin-top: 375px;
	margin-left: -595px;
}

#left-case1 img {
	max-width: 400px;
	min-width: 400px;
	width: 100%;
	}

#right-case1{
	max-width: 200px;
	margin-left: -150px;
	margin-top: 475px;
	text-align: left;
	float: left;
}

#left-case2 {
	float: left;
	margin-top: 750px;
	margin-left: -595px;
}

#left-case2 img {
	max-width: 400px;
	min-width: 400px;
	width: 100%;
	}

#right-case2{
	max-width: 200px;
	margin-left: -150px;
	margin-top: 880px;
	text-align: left;
	float: left;
}

#left-case3 {
	float: left;
	margin-top: 1170px;
	margin-left: -595px;
}

#left-case3 img {
	max-width: 400px;
	min-width: 400px;
	width: 100%;
	}

#right-case3{
	max-width: 200px;
	margin-left: -150px;
	margin-top: 1270px;
	text-align: left;
	float: left;
}


/** END OF CASE STUDIES PAGE **/

/** DISTRIBUTORS PAGE **/

#map {
	max-width: 900px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;	
}

#map img {
	max-width: 900px;
	width: 100%;
}

/** END OF DISTRIBUTORS PAGE **/
		
/** CONTACT **/
#contact {
	width: 90%;
	max-width: 900px;
	margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
	}
	
#con-left{
	float: left;
	width: 100%;
	max-width: 450px;	
}

#info {
	float: left;
	max-width: 400px;
	margin-top: 300px;
	margin-left: -450px;
}

.info{	
	line-height: 5px;
}

#con-right{
	float: right;
	max-width: 400px;
	margin-top: -135px;	
}

/*FORM*/
form {
	max-width:400px;
	margin-left: -400px;
	margin-top: 125px;
}

label {
	display: block;
	margin-top: 20px;
	font-family: "Fira Sans", sans-serif;
	font-weight: lighter;
}

input, textarea {
	width: 100%;
	max-width:439px;
	height:27px;
	background:#efefef;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border:1px solid #dedede;
	padding:10px;
	margin-top:3px;
	font-size:0.9em;
	color:#3a3a3a;
	font-family: "Fira Sans", sans-serif;
}

	input:focus, textarea:focus {
	border:1px solid #97d6eb;
}

textarea {
	height:213px;
	font-family: "Fira Sans", sans-serif;
}

#submit {
	width:127px;
	height:38px;
	background-color: #3f95c4;
	color: #ffffff;
	border:none;
	margin-top:20px;
	cursor:pointer;
	}

	#submit:hover {
	opacity:0.9;
	}

/** END CONTACT **/

/* Media Queries */
@media screen and (max-width: 940px) {
	#con-left{
	float: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: -10px;
	width: 100%;
	max-width: 450px;	
	}
	
	#info {
	float: none;
	max-width: 400px;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	}
	
	#con-right{
	float: none;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	max-width: 400px;
	margin-top: -50px;	
	padding-right: 20px;
	}
	
	form {
	max-width:400px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 125px;
	}
}

@media screen and (max-width: 850px) {
	nav ul li {
		font-size: 10px;
	}

}

@media screen and (max-width: 830px) {
/*PRODUCT 1*/
#left {
	float: none;
}

#left img {
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 100%;
	}

#right{
	max-width: 350px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	text-align: center;
	float: none;
}

#left1 {
	float: none;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-top: 100px;
}

#left1 img {
	max-width: 400px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	}

#right1{
	max-width: 350px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	text-align: center;
	float: none;
	}
	
	#left2 {
	float: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
	text-align: center;
}

#left2 img {
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 100%;
	}

#right2{
	max-width: 350px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	text-align: center;
	float: none;
	}
#left2 {
	float: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
	text-align: center;
}

#left2 img {
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 100%;
	}

#right2{
	max-width: 350px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	text-align: center;
	float: none;
	}

#left3 {
	float: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
	text-align: center;
}

#left3 img {
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 100%;
	}

#right3{
	max-width: 350px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	text-align: center;
	float: none;
	}
	
	/*PRODUCT 2*/
#gauche {
	float: none;
}

#gauche img {
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 100%;
	}

#droit{
	max-width: 350px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	text-align: center;
	float: none;
}

#gauche1 {
	float: none;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-top: 100px;
}

#gauche1 img {
	max-width: 400px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	}

#droit1{
	max-width: 350px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	text-align: center;
	float: none;
	}
	
#gauche2 {
	float: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
	text-align: center;
}

#gauche img {
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 100%;
	}

#droit2{
	max-width: 350px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	text-align: center;
	float: none;
	}
	
#gauche2 {
	float: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
	text-align: center;
}

#gauche2 img {
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 100%;
	}

#droit2{
	max-width: 350px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	text-align: center;
	float: none;
	}

#gauche3 {
	float: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
	text-align: center;
}

#gauche3 img {
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 100%;
	}

#droit3{
	max-width: 350px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	text-align: center;
	float: none;
	}
}


@media screen and (max-width: 750px) {
	#logo img{
	margin-left: auto;
	margin-right: auto;	
	}
	
	header nav {
		margin-left: auto;
		margin-right: auto;
		margin-top: 10px;
		padding-bottom: 10px;
		text-align: center;
		float: none;
		font-size: 12px;
	}
}

@media screen and (max-width: 700px) {	
nav li:hover > ul {
	width: 450%;
	margin-left: 100px;
	padding: 0;
	}
}

@media screen and (max-width: 650px) {	
#left-case {
	float: none;
	margin-left: auto;
	margin-right: auto;
}

#left-case img {
	max-width: 400px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	}

#right-case{
	max-width: 200px;
	float: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	text-align: center;
	
}

#left-case1 {
	float: none;
	margin-top: 75px;
	margin-left: auto;
	margin-right: auto;
}

#left-case1 img {
	max-width: 400px;
	min-width: 0px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	}

#right-case1{
	max-width: 200px;
	float: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: 25px;
	text-align: center;
}

#left-case2 {
	margin-top: 75px;
	float: none;
	margin-left: auto;
	margin-right: auto;
}

#left-case2 img {
	max-width: 400px;
	min-width: 0px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	}

#right-case2{
	max-width: 200px;
	float: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	text-align: center;
}

#left-case3 {
	margin-top: 80px;
	float: none;
	margin-left: auto;
	margin-right: auto;
}

#left-case3 img {
	max-width: 400px;
	min-width: 0px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	}

#right-case3{
	max-width: 200px;
	float: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: 25px;
	text-align: center;
	}

}

@media screen and (max-width: 480px) {
header nav, aside {
	float: left;
	clear: left;
	margin: 0 0 10px; 
	width: 100%;
	}	
		
header nav li {
	margin: 0;
	background: #efefef;
	display: block;
	margin-bottom: 3px;
	}
	
header nav a {
	display: block;
	padding: 10px;
	text-align: center;
	}
	
	nav li:hover > ul {
	width: 100%;
	margin-left: 0px;
	padding: 0;
	}
	
	nav li:hover > ul li{
	background-color: #8c0d19;
	line-height: 16px;
	}	
	
	#con-left{
	float: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: -10px;
	width: 100%;
	max-width: 450px;	
	}
	
	#info {
	float: none;
	max-width: 400px;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	}
	
	#con-right{
	float: none;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding-right: 20px;
	max-width: 400px;
	margin-top: -100px;	
	}
	
	form {
	max-width:280px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 125px;
	}
	
	#logo img{
	margin-top: 20px;
	padding-bottom: 10px;
	}	
	
	#left-case img {
	margin-top: 300px;
	}
}