#croppic{
				width: 400px;  /* MANDATORY */
				height: 208px; /* MANDATORY */
				position: relative;  /* MANDATORY */
				
				margin: 50px 70px 20px;
				border: 3px  solid #FFF;
				box-sizing: content-box;
				-moz-box-sizing: content-box;
				border-radius: 2px;
				background-image: url(../img/placeholder.png);
				background-repeat: no-repeat;
				background-position: center;
				box-shadow: 8px 8px 0px rgba(0,0,0,0.1);
			}
			
			/* DO NOT CHANGE FROM HERE ( unless u know what u are doing) */
			.cropImgWrapper{
				cursor: -webkit-grab;
				cursor: grab;
			}
			.cropImgWrapper:active{
				cursor: -webkit-grabbing;
				cursor: grabbing;
			}
			
			.cropImgUpload{
				z-index:2;
				position:absolute;
				height:28px;
				display:block;
				top: -30px;
				right: -2px;
				font-family:sans-serif;
				width:20px;
				height:20px;
				text-align:center;
				line-height:20px;
				color:#FFF;
			}
			
			.cropControls{
				z-index:2;
				position:absolute;
				height:30px;
				display:block;
				/* top: -31px; */
				top: -1px;
				right: -1px;
				font-family:sans-serif;
				background-color:rgba(0,0,0,0.35); 
			}
			
			.cropControls i{
				display:block;
				float:left;
				margin:0;
				cursor:pointer;
				background-image:url('../img/cropperIcons.png');	
				width:30px;
				height:30px;
				text-align:center;
				line-height:20px;
				color:#FFF;
				font-size:13px;
				font-weight: bold;
				font-style: normal;
				
			}
			
			.cropControls i:hover{ background-color:rgba(0,0,0,0.7);  }
			
			.cropControls i.cropControlZoomMuchIn{ background-position:0px 0px;}
			.cropControls i.cropControlZoomIn{ background-position:-30px 0px; }
			.cropControls i.cropControlZoomOut{ background-position:-60px 0px; }
			.cropControls i.cropControlZoomMuchOut{ background-position:-90px 0px; }
			.cropControls i.cropControlRotateLeft{ background-position:-210px 0px; }
			.cropControls i.cropControlRotateRight{ background-position:-240px 0px; }
			.cropControls i.cropControlCrop{ background-position:-120px 0px;}
			.cropControls i.cropControlUpload{ background-position:-150px 0px;}
			.cropControls i.cropControlReset{ background-position:-180px 0px;}
			.cropControls i.cropControlRemoveCroppedImage{ background-position:-180px 0px;}
			
			.cropControls i:last-child{
				margin-right:none;
			}
			
			#croppicModal{
				position:fixed;
				width:100%;
				height:100%;
				top: 0;
				left: 0;
				display:block;
				background:rgba(0,0,0,0.8);
				z-index: 10000;
			}
			
			
			/*
			*		PRELOADER 
			*		With courtesy of : http://cssload.net/
			*/
			
			.bubblingG {
				text-align: center;
				width:80px;
				height:50px;
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -18px auto auto -40px;
				z-index:2;
			}

			.bubblingG span {
				display: inline-block;
				vertical-align: middle;
				width: 10px;
				height: 10px;
				margin: 25px auto;
				background: #FFF;
				box-shadow: 5px 5px 0px rgba(0,0,0,0.2);
				-moz-border-radius: 50px;
				-moz-animation: bubblingG 1s infinite alternate;
				-webkit-border-radius: 50px;
				-webkit-animation: bubblingG 1s infinite alternate;
				-ms-border-radius: 50px;
				-ms-animation: bubblingG 1s infinite alternate;
				-o-border-radius: 50px;
				-o-animation: bubblingG 1s infinite alternate;
				border-radius: 50px;
				animation: bubblingG 1s infinite alternate;
				
			}

			#bubblingG_1 {
				-moz-animation-delay: 0s;
				-webkit-animation-delay: 0s;
				-ms-animation-delay: 0s;
				-o-animation-delay: 0s;
				animation-delay: 0s;
			}

			#bubblingG_2 {
				-moz-animation-delay: 0.3s;
				-webkit-animation-delay: 0.3s;
				-ms-animation-delay: 0.3s;
				-o-animation-delay: 0.3s;
				animation-delay: 0.3s;
			}

			#bubblingG_3 {
				-moz-animation-delay: 0.6s;
				-webkit-animation-delay: 0.6s;
				-ms-animation-delay: 0.6s;
				-o-animation-delay: 0.6s;
				animation-delay: 0.6s;
			}

			@-moz-keyframes bubblingG {
				0% {
					width: 10px;
					height: 10px;
					background-color:#FFF;
					-moz-transform: translateY(0);
				}

				100% {
					width: 24px;
					height: 24px;
					background-color:#FFF;
					-moz-transform: translateY(-21px);
				}

			}

			@-webkit-keyframes bubblingG {
				0% {
					width: 10px;
					height: 10px;
					background-color:#FFF;
					-webkit-transform: translateY(0);
				}

				100% {
					width: 24px;
					height: 24px;
					background-color:#FFF;
					-webkit-transform: translateY(-21px);
				}

			}

			@-ms-keyframes bubblingG {
				0% {
					width: 10px;
					height: 10px;
					background-color:#FFF;
					-ms-transform: translateY(0);
				}

				100% {
					width: 24px;
					height: 24px;
					background-color:#FFF;
					-ms-transform: translateY(-21px);
				}

			}

			@-o-keyframes bubblingG {
				0% {
					width: 10px;
					height: 10px;
					background-color:#FFF;
					-o-transform: translateY(0);
				}

				100% {
					width: 24px;
					height: 24px;
					background-color:#FFF;
					-o-transform: translateY(-21px);
				}

			}

			@keyframes bubblingG {
				0% {
					width: 10px;
					height: 10px;
					background-color:#FFF;
					transform: translateY(0);
				}

				100% {
					width: 24px;
					height: 24px;
					background-color:#FFF;
					transform: translateY(-21px);
				}

			}
			
			
			/* some reset stlyes */
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
p, form, img, h1, h2, h3, h4, h5, h6, ul, ol, li, html, body, header, footer {
	margin: 0;
	padding: 0;
}
p, form, img, h1, h2, h3, h4, h5, h6, ul, ol, li, html, body, header, footer {
	margin: 0;
	padding: 0;
}
a{
	outline: none;
}

/*************FONT*************/
@font-face {
  font-family: 'OpenSans-Semibold';
  src: url('fonts/opensans-sb/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),  url('fonts/opensans-sb/OpenSans-Semibold.woff') format('woff'), url('fonts/opensans-sb/OpenSans-Semibold.ttf')  format('truetype'), url('fonts/opensans-sb/OpenSans-Semibold.svg#OpenSans-Semibold') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'HelveticaNeueLTStd-MdCn';
  src: url('fonts/helvetica_mc/HelveticaNeueLTStd-MdCn.eot?#iefix') format('embedded-opentype'),  url('fonts/helvetica_mc/HelveticaNeueLTStd-MdCn.woff') format('woff'), url('fonts/helvetica_mc/HelveticaNeueLTStd-MdCn.otf')  format('opentype'), url('fonts/helvetica_mc/HelveticaNeueLTStd-MdCn.svg#HelveticaNeueLTStd-MdCn') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'HelveticaNeueLTStd-BdCn';
  src: url('fonts/helvetica_bc/HelveticaNeueLTStd-BdCn.eot?#iefix') format('embedded-opentype'),  url('fonts/helvetica_bc/HelveticaNeueLTStd-BdCn.woff') format('woff'), url('fonts/helvetica_bc/HelveticaNeueLTStd-BdCn.otf')  format('opentype'), url('fonts/helvetica_bc/HelveticaNeueLTStd-BdCn.svg#HelveticaNeueLTStd-BdCn') format('svg');
  font-weight: normal;
  font-style: normal;
}


/*
2f3131 - coal
f8f1e5 -bone
426e86 - blue
f9ba32- gold

*/


ul, li{
	list-style-type: none;
}
html{
	height: 100%;
	margin: 0;
	padding: 0;
	font-size: 62.5%;
}

body{	
	background: #f8f1e5;
	color: #2f3131;
	font-family: 'OpenSans-Semibold', Helvetica, Trebuchet, verdana, arial, sans-serif;
	font-size: 14px;
	font-size: 1.4rem;
	text-align: left;
	height: 100%;
	margin: 0;
}

/*--GENERAL---*/

a img{
	border: 0;
}

a{
	text-decoration: none;
}

.clear{
	clear: both;
}
.clafter:after {
	content:'';
	clear: both;
	display:block;
}
#page #content .hide,
.hide{
	position: absolute;
	left: -10000px
}
.inner{
	margin: 0 auto;
	width: 100%;
	max-width: 978px;
	position: relative;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box; 
	padding: 0 10px;
}
.center,
#content p.center{
	text-align: center;
}

/*****************************
	GLOBAL
 *****************************/
 
#page {
	min-height: 100%;
	width: 100%;
	position: relative;
	z-index: 10;
}

header{	
	height: 76px;
	width: 100%;
	background: #426e86;
	margin: 0 auto;
	border-bottom: 1px solid #f8f1e5;
	position: relative;
	z-index: 20;
}
header h1#logo a{	
	display: block;
	width: 150px;
	height: 62px;
	background: url("/images/theme/logo.png") no-repeat 0 15px;
}

/* NAV MIN */
header button.nav{
	position: absolute;
	left: 14px;
	top: 14px;
	margin: 0;
	padding: 0;
	border: 0;
	background: url("/images/theme/smart/nav-min.png") no-repeat 50% 50%;
	width: 46px;
	height: 46px;
	z-index: 60;
	cursor: pointer;
	border: 1px solid #c2cdd4;
	border-radius: 3px;
}
nav.min{
	position: absolute;
	left: 0;
	top: -1000px;
	z-index: 30;
	width: 100%;
	padding: 0;
	z-index: 10;
}



/* NAV */
header nav li{	
	position:relative;
}
header nav > ul > li > a,	
nav.min > ul > li > a{	
	color: #fff;
	font-size: 16px;
	font-size: 1.6rem;
	font-family: 'HelveticaNeueLTStd-MdCn', Helvetica, Trebuchet, sans-serif;
	display: block;
	text-transform: uppercase;
}
nav.min > ul > li > a{	
	padding: 8px 10px;
	color: #2f3131;
}
header nav > ul > li > a:hover,
nav.min > ul > li > a:hover,
header nav > ul > li.actif > a,
nav.min > ul > li.actif > a{
	background: #f9ba32;
	color: #2f3131;
}

header nav li ul li a,
nav.min li ul li a{
	color: #888;
	padding: 6px 0;
	display: block;
	font-size: 14px;
	font-size: 1.4rem;
}

header nav li ul li.actif a,
nav.min li ul li.actif a,
header nav li ul li a:hover,
nav.min li ul li a:hover{
	color: #222;
}




/****************************/


#content {
}


#content h1 {
	width: 100%;
	text-align: left;
	overflow: hidden;
	font-family: 'HelveticaNeueLTStd-BdCn', Helvetica, Trebuchet, sans-serif;
	margin: 20px 0 30px;
	font-weight: normal;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box; 
	padding-bottom: 2px;
	border-bottom: 1px solid #333;
	font-size: 30px;
	font-size: 3rem;
	text-transform: uppercase;
	
}


#content  h2{
	font-size: 24px;
	font-size: 2.4rem;
	margin: 28px 0 6px;
	color: #292b2b;
	font-family: 'HelveticaNeueLTStd-BdCn', Helvetica, Trebuchet, sans-serif;
	font-weight: normal;  
}

#content  h3{
	font-size: 18px;
	font-size: 1.8rem;
	margin: 6px 0 4px;
	font-weight: normal;  
	font-family: 'HelveticaNeueLTStd-MdCn', Helvetica, Trebuchet, sans-serif;
}



#content  p{
	margin: 12px 0;
	text-align: left;
	line-height: 140%;
}


#content  ul li{
	font-size: 14px;
	font-size: 1.4rem;
}


#content  a{
	margin: 12px 0;
	color: #426e86;
	text-decoration: underline;
	
}
#content  a:hover{
	text-decoration: none;
}


/* HOME */
body.home #content,	
body.home #content p{	
	text-align: center;
}
body.home #page #content  p.me{	
	/*width: 300px;
	height: 300px;*/
	background: url("/images/theme/profil.jpg") no-repeat 50% 100%;
	padding-bottom: 320px;
	margin: 20px auto;
	border: 0;
}





/*Projects listing*/
ul.projects li {
	width: 100%;
	max-width: 300px;
	display: inline-block;
	vertical-align: top;
	margin-left: 0;
	margin-right: 35px;
	margin-bottom: 30px;
}
ul.projects li:nth-child(3n+3) {
	margin-right: 0;
}
#content ul.projects li a.more {
	display: block;
	padding-top: 240px;
	position: relative;
	text-align: left;
	text-decoration: none;
}
ul.projects li a.more:before {
	content: '\203a \203a';
	font-family: 'arial, sans-serif';
	font-weight: bold;
}
ul.projects li a.more img {
	position: absolute;
	top: 0;
	left: 0;
}


/*About listing*/
ul.about li {
	margin: 3px 0 6px;
}

ul.about li strong{
	font-family: 'HelveticaNeueLTStd-MdCn', Helvetica, Trebuchet, sans-serif;
	font-size: 20px;
	font-size: 2rem;
	font-weight: normal;
}
ul.about li strong span{
	display: inline-block;
	border-radius: 3px;
	background: #f9ba32;
	padding: 1px 5px;
	font-size: 16px;
	font-size: 1.6rem;
}
ul.about li em{
	font-size: 13px;
	font-size: 1.3rem;
	color: #5a5e5e;
}


/*Skills listing*/
ul.skills > li {
	margin: 3px 0 16px;
	float: left;
	padding-right: 70px;
}
ul.projects > li:nth-child(3n+3) {
	padding-right: 0;
}
ul.skills > li > ul > li {
	padding-left: 3px;
}
ul.skills > li > ul > li:before {
	content: '\203a\203a\00a0';
}
ul.skills li h3{
	display: inline-block;
	border-radius: 3px;
	background: #f9ba32;
	padding: 1px 5px;
	font-size: 16px;
	font-size: 1.6rem;
}



/*************** CONTACT*****************/

#content form{
	max-width: 976px;
	width: 100%;
	margin: 0 auto;
}
#content form p{
	max-width:488px;
	min-width:280px;
	width: 100%;
	float: left;
	text-align: left;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	padding: 5px 10px 0;
	margin: 8px 0;
}

#content form p label,
#content form p label,
#content form p span.lab{
	display: block;
	padding-bottom: 2px;
	text-align: left;
}
#content form p label span{
	color: #426e86;
}
#content form input[type='email'],
#content form input[type='password'],
#content form input[type='text'],
#content form textarea{
	border: 1px solid #426e86;
	background: #fff;
	color: 102e49;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box; 
	padding: 8px 10px;
	font-size: 15px;
	font-size: 1.5rem;
	width: 100%;
}
#content form textarea{
	font-family: 'OpenSans-Semibold', Helvetica, Trebuchet, sans-serif;
}
#content form input[type='submit']{
	display: block;
	padding: 14px 24px;
	border: 0;
	background: #f9ba32;
	margin-top: 20px;
	color: #2f3131;
	text-transform: uppercase;	
	cursor: pointer;
	font-size: 20px;
	font-size: 2rem;
	font-family: 'HelveticaNeueLTStd-MdCn', Helvetica, Trebuchet, sans-serif;
	margin: 0 auto;
}
#content form input[type='submit']:hover{
	background: #426e86;
	color: #fff;
}
#content form p.p-textarea,
#content form p.p-submit{
	width: 100%;
	max-width: 100%;
	text-align: center;
}












/***********  ERROR  ***************/

#page #content form p.error{	
	font-family: 'HelveticaNeueLTStd-BdCn', Helvetica, Trebuchet, sans-serif;
	color: #bf1616;
	background-color: rgba(255,255,255,0.5);
	padding: 6px 8px;
	text-align: center;
	font-size: 18px;
	font-size: 1.8rem;
	max-width: 100%;
	width: 100%;
	border-radius: 5px;
}
#page #content form p.success{	
	font-family: 'HelveticaNeueLTStd-BdCn', Helvetica, Trebuchet, sans-serif;
	color: #34b349;
	background-color: rgba(255,255,255,0.5);
	padding: 6px 8px;
	text-align: center;
	font-size: 18px;
	font-size: 1.8rem;
	max-width: 100%;
	width: 100%;
	border-radius: 5px;
}

/***********  FOOTER  ***************/

#page:after{	
	content:'';
	display: block;
	clear: both;
	width: 100%;
}

footer{	
	background: #2f3131;
	text-align: center;
	position: relative;
}
footer p{	
	color: #bdb9a6;
	font-size: 12px;
	font-size: 1.2rem;
	margin: 0;
	padding: 10px 0;
}
footer a{	
	color: #bdb9a6;
	text-decoration: none;
}
footer a:hover{	
	color: #DBD6C0;
}

/******************* Animation ************************/
/*
circle#circle{
    animation: circlemove 6s linear infinite;
}
@keyframes circlemove {
	0% {
        transform: translate(0,0);
    }
    12.5% {
        transform: translate(-2px,-2px);
    }
    25% {
        transform: translate(-4px,0px);
    }
    37.5% {
        transform: translate(-2px,2px);
    }
    50% {
        transform: translate(0px,0px);
    }
    62.5% {
        transform: translate(2px,-2px);
    }
    75% {
        transform: translate(4px,0px);
    }
    87.5% {
        transform: translate(2px,2px);
    }
    100% {
        transform: translate(0,0);
    }
}*/html{
	margin: 0;
}

/* Small Devices, Tablets */
@media only screen and (max-width : 599px) {
	header h1#logo a{	
		margin-left: 80px;
	}
	nav.min{	
		background: #fff;
	}
	nav.min li ul{
		margin-left: 20px;
	}
}


/* Small Devices, Tablets */
@media only screen and (min-width : 600px) {
	.inner{
		padding: 0;
	}
	
	header nav{	
		position: absolute;
		right: 0;
		top: 0;
		height: 76px;
	}
	header nav li{	
		display:inline-block;
	}
	
	header nav > ul > li > a{	
		height: 76px;
		line-height: 76px;
		padding: 0 20px;
		border-right: 1px solid #E8E8E8;
	}	
	header nav > ul > li:first-child > a{	
		border-left: 1px solid #E8E8E8;
	}
	header nav li ul{
		position:absolute;
		max-height:0;
		left: 0;
		right: 0;
		overflow:hidden;
		-moz-transition: .8s all .3s;
		-webkit-transition: .8s all .3s;
		transition: .8s all .3s;
		background: #fff;
		margin-left: -1px;
		border: 1px solid #E8E8E8;
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box; 
		box-sizing: border-box; 
	}
	header nav li:hover ul{
		max-height:15em;
	}
	header nav li ul li{
		background: #fff;
		display:inherit;
	}
	header nav li ul li a{
		padding: 5px 0 5px 8px;
	}
	
	


	

	
	/***********  FOOTER  ***************/

	#page:after{	
		height: 45px;
	}
	footer{	
		margin: -42px auto 0;
		height: 40px;
	}

}