/* Reset
------------------------------------------------------------ */
* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body { background:#ffffff; font-size: 13px; color: #333132; font-family: Arial, helvetica, sans-serif;}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
a, img { outline: none; border:none;}
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;
	}
	
	
.clear {
	clear:both;}
	
h1 {
	margin-bottom: 10px;
	color: #ffffff;
	}

h2 {
	margin-bottom: 10px;
	color: #026790;
	font-size: 1.6em;
	}		
	
	
/* Structure */

.wrapper {
	width: 100%;	
	max-width: 920px;
	margin: auto;
	} 

/* Header */
#header {
	background: url('../images/header_BKG.jpg') no-repeat bottom;
	margin-top: 2em;
	padding:2%;
	}

#logo {
	height: 74px;
	width: 215px;
	float: left;
	margin:0 0 5em 0;
	display: block;
	background: url('../images/SDLC_logo.png') 0 0 no-repeat;
	text-indent: -9999px;
	}
	
#logo-fr {
	height: 74px;
	width: 215px;
	float: left;
	margin:0 0 5em 0;
	display: block;
	background: url('../images/SDLC_logo_FR.png') 0 0 no-repeat;
	text-indent: -9999px;
	}
	
#tagline {
	height: 78px;
	width: 289px;
	float: left;
	margin:0 0 5em 5em;
	display: block;
	background: url('../images/SDLC_tagline.png') 0 0 no-repeat;
	text-indent: -9999px;
	}
	
#tagline-fr {
	height: 78px;
	width: 322px;
	float: left;
	display: block;
	margin:0 0 5em 4.5em;
	background: url('../images/SDLC_tagline_FR.png') 0 0 no-repeat;
	text-indent: -9999px;
	}
	
#social-media {
	float: right;
	width: 190px;
	}
	
#social-media li {
	display: inline;
	}
	
.langue {
	float: left;
	width: 55px;
	color: #026790;
	font-weight: bold;
	text-decoration: none;
	margin-top:0.4em;
	margin-right:0.4em;
	}
	
.langue:Hover {
	color: #39cacc;
	}
	
.linkedin {
	display: block;
	float: left;
	width: 24px;
	height: 24px;
	margin-left: 0.6em;
	background: url('../images/linkedin.png') bottom;
	text-indent: -99999px;
	}
	
.linkedin:hover {
	background-position: 0 0;
	}

.twitter {
	display: block;
	float: left;
	width: 24px;
	height: 24px;
	margin-left: 0.6em;
	background: url('../images/twitter.png') bottom;
	text-indent: -99999px;
	}
	
.twitter:hover {
	background-position: 0 0;
	}

.facebook {
	display: block;
	float: left;
	width: 24px;
	height: 24px;
	margin-left: 0.6em;
	background: url('../images/facebook.png') bottom;
	text-indent: -99999px;
	}
	
.facebook:hover {
	background-position: 0 0;
	}

.google {
	display: block;
	float: left;
	width: 24px;
	height: 24px;
	margin-left: 0.6em;
	background: url('../images/google.png') bottom;
	text-indent: -99999px;
	}
	
.google:hover {
	background-position: 0 0;
	}	

#contact {
	padding-top:2em;
	padding-left:2em;
	font-size:1.2em;
	background: url('../images/contact_icons.png') no-repeat bottom left;
	}
	
#contact a {
	color: #333132;
	text-decoration: none;
	}
	
#contact a:hover {
	color: #026790;
	}
	
#contact p {
	font-size: 1em;
	padding-top: 0.3em;
	margin:0px;
	}

	
/* About us section */

#container-about {
	width: 100%;
	background: #1b88c6 url('../images/about_BKG.jpg') no-repeat top;
	}
	
#about-text {
	width:55%;
	padding: 9%;
	color:#ffffff;
	}
	
#about-text-fr {
	width:55%;
	padding: 9%;
	color:#ffffff;
	}
	
/* Services section */
	
#container-services {
	background: url('../images/services_blue_BKG.jpg') repeat-x;
	margin-bottom:3em;
	}
	
#container-services ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

#container-services ul li {
    background-image: url('../images/square.gif');
    background-repeat: no-repeat;
    background-position: 0px 5px; 
    padding-left: 1em; 
}
	
#container-services li {
	margin-left:0.2em;
	padding-bottom:1em;
	font-size:1.1em;
	}
	
.column-first {
	float:left;
	width:32%;
	}
	
.column-first img {
	width:100%;
	}

.column-middle {
	float:left;
	margin-left:2%;
	width:32%;
	}
	
.column-middle img {
	width:100%;
	}

.column-last {
	float:left;
	margin-left:2%;
	width:32%;
	}
	
.column-last img {
	width:100%;
	}
	
/* Gray footer section */
	
#container-gray {
	background-color: #6c8382;
	}
	
#wrapper-purpose {
	width: 50%;
	float:left;
	}
	
#purpose-text {
	width: 60%;
	float:right;
	padding:10%;
	color:#ffffff;
	}

#wrapper-difference {
	width: 50%;
	float:left;
	background-color: #d4dbdb;
	}
	
#difference-text {
	width: 60%;
	float:left;
	padding:10%;
	color:#333132;
	}
	
#difference-text h1 {
	color:#333132;	
	}
	
#copyright {
	float:right;
	color:#6c8382;
	font-size:0.8em;
	margin:4%;
	}

	

/* Media Queries */
@media screen and (max-width: 820px) {
	#tagline {
		margin: 1em 0 1em 3em;
		width:200px;
		background: url('../images/SDLC_tagline_small.png') 0 0 no-repeat;
		}
		
	#tagline-fr {
		margin: 1em 0 1em 1em;
		width:232px;
		background: url('../images/SDLC_tagline_FR_small.png') 0 0 no-repeat;
		}
		
	#social-media {
		float:left;
		margin: 0 0 1em 3em;
		}
		
	.column-first {
		float:left;
		width:30%;
		margin-left:4%;
		}
		
	.column-first img {
		width:80%;
		margin:auto;
		}

	.column-middle {
		float:left;
		margin-left:4%;
		width:29%;
		}
		
	.column-middle img {
		width:80%;
		margin:auto;
		}

	.column-last {
		float:left;
		margin-left:4%;
		width:29%;
		}
		
	.column-last img {
		width:80%;
		margin:auto;
		}
		
	#container-gray h1 {
		font-size:1.6em;
		}
		
	#purpose-text{
		float:left;
		width:80%;
		}
		
	#difference-text {
		width:80%;
		}
		

}


@media screen and (max-width: 480px) {
	
	#logo {
		margin: 0;
		margin-left:2em;
		}
		
	#logo-fr {
		margin: 0;
		margin-left:2em;
		}

	#social-media {
		float:left;
		margin: 1.5em 0 1em 3em;
		}
		
	#about-text {
		width:80%;
		padding:2%;
		padding-top:9em;
		margin-left:10%;
		}
		
	#about-text-fr {
		width:80%;
		padding:2%;
		padding-top:9em;
		margin-left:10%;
		}
		
	.column-first {
		float:left;
		width:80%;
		margin:10%;
		}
		
	.column-first img {
		width:70%;
		margin: auto;
		}
	
	.column-middle {
		float:left;
		width:80%;
		margin:10%;
		}
		
	.column-middle img {
		width:70%;
		margin: auto;
		}
		
	.column-last {
		float:left;
		width:80%;
		margin:10%;
		}
		
	.column-last img {
		width:70%;
		margin: auto;
		}
		
	#wrapper-purpose {
		width:100%;
		}
		
	#purpose-text {
		float:left;
		width:80%;
	}
		
	#wrapper-difference {
		width:100%;
		}
	
	}