/* Votre Style */

ul {-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0;
list-style:none;}

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
body {
	font-family: 'Lato', Calibri, Arial, sans-serif;
	max-width: 960px;
	margin: 0 auto;
}

.mainDetails {
	padding: 25px 35px;
	border-bottom: 2px solid rgb(208, 101, 3);
	background: #ededed;
}

.competences {
	padding: 25px 35px;
	border-bottom: 2px solid rgb(233, 147, 26);
	background: #ededed;
}

.experiences {
	padding: 25px 35px;
	border-bottom: 2px solid rgb(22, 145, 190);
	background: #ededed;
}

.diplomes {
	padding: 25px 35px;
	border-bottom: 2px solid rgb(22, 107, 162);
	background: #ededed;
}

.interest {
	padding: 25px 35px;
	border-bottom: 2px solid rgb(27, 54, 71);
	background: #ededed;
}

.contact {
	padding: 25px 35px;
	border-bottom: 2px solid rgb(21, 40, 54);
	background: #ededed;
	min-height:100px;
	margin-bottom:100px;
}

#name h1 {
	font-size: 2.5em;
	font-weight: 700;
	/* font-family: 'Rokkitt', Helvetica, Arial, sans-serif; */
	margin-bottom: -6px;
}

#name h2 {
	font-size: 2em;
	margin-left: 2px;
	/* font-family: 'Rokkitt', Helvetica, Arial, sans-serif; */
}

#mainArea {
	padding: 0 40px;
}

#headshot {
	width: 12.5%;
	float: left;
	margin-right: 30px;
}

#headshot img {
	width: 100%;
	height: auto;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

#name {
	float: left;
}

#contactDetails {
	float: right;
}

#contactDetails ul {
	list-style-type: none;
	/* font-size: 0.9em; */
	margin-top: 2px;
	
	visibility:hidden;
}

#contactDetails ul li {
	margin-bottom: 3px;
	color: #444;
}

#contactDetails ul li a, a[href^=tel] {
	color: #444; 
	text-decoration: none;
	-webkit-transition: all .3s ease-in;
	-moz-transition: all .3s ease-in;
	-o-transition: all .3s ease-in;
	-ms-transition: all .3s ease-in;
	transition: all .3s ease-in;
}

#contactDetails ul li a:hover { 
	color: #cf8a05;
}

.subDetails {
	font-size: 1em;
	font-style: italic;
	margin: 0;
}

.mod article h2 { margin:0; line-height:0.9; font-weight:normal; }
.mod > article { margin-bottom:1em; border-bottom: 2px solid gray; }
.mod > article:last-child { border-bottom: none; }

/* Switching box model for all elements */
/* * {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
} */

/* nav { position:fixed; top:0; width: 100%; }

/* Theming opened nav * /	
nav ul {		
	/* global styles * /
	margin: 0;
	padding: 0;
	list-style: none;
}

nav li { display: inline-block;
width: 16%;
text-align: center; } */

/* Responsive Navigation styles begin here */
@media (min-width: 768px) {

	body { margin-top:80px; }
	
	.mod ul { line-height:25px; }
	.mod ul.withcircle { list-style: initial; }
	.mod > article ul li { padding-left:1em; }
	
	.experiences-projects { padding-left:1em; }
	
	nav { position:fixed; top:0; width: 100%; max-width:960px; }
	nav ul { list-style: none; height:80px; }
	nav li { display:inline-block; width:16.666666%; text-align:center; height:100%; }
	nav li a { display:block; background-repeat:no-repeat; background-position:center top; padding-top:45px; height:100%;
		color:rgba(249, 249, 249, .5);}
	
	nav a:hover, nav a:focus, nav a:active {
		color: rgba(249, 249, 249, .99);
	}
	
	.nav-top { background-image:url('../home.png'); }
	.nav-skills { background-image:url('../Entypo_d83d(1)_48.png'); }
	.nav-projects { background-image:url('../Entypo_275e(3)_48.png'); }
	.nav-education { background-image:url('../Entypo_d83c(10)_48.png'); }
	.nav-hobbies { background-image:url('../Entypo_d83c(9)_48.png'); }
	.nav-contact { background-image:url('../Entypo_2709(7)_48.png'); }
	
	
	nav li:nth-child(6n+1) {
		background-color: rgb(208, 101, 3);
	}

	nav li:nth-child(6n+2) {
		background-color: rgb(233, 147, 26);
	}

	nav li:nth-child(6n+3) {
		background-color: rgb(22, 145, 190);
	}

	nav li:nth-child(6n+4) {
		background-color: rgb(22, 107, 162);
	}

	nav li:nth-child(6n+5) {
		background-color: rgb(27, 54, 71);
	}

	nav li:nth-child(6n+6) {
		background-color: rgb(21, 40, 54);
	}
	
	section h1 {
		float: left;
		width: 25%;
		font-weight:normal;
		font-style:italic;
		color:rgb(208, 101, 3);
	}

}

@media (max-width: 767px) {
	
	nav + * {
		position: relative;
	}

	/* Theming opened nav */	
	nav ul {		
		
		/* maximum height */
		max-height: 25em;

		/* translate with hardware acceleration */
		-webkit-transform: translateZ(0); 
		-ms-transform: translateZ(0);
		        transform: translateZ(0);
		-webkit-transition: max-height .4s;
		        transition: max-height .4s;
		will-change: max-height;

		/* global styles */
		margin: 0;
		padding: 0;
		list-style: none;
	}
	nav a {
		display: block;
		padding: 1.2rem;
		color: #333;
		background: #fff;
		text-decoration: none;
		margin-bottom: 2px;
	}
	nav a:hover, 
	nav a:focus,
	nav a:active
	{
		background: #eee;
	}
	
	/* Theming closed nav */
	nav.is-closed ul {
		max-height: 0;
		overflow: hidden;
	}

	/* Global styling nav button */	
	nav > button {
		display: block;
		position: absolute;
			top: 1rem; right: 1rem;
		z-index: 1;
		height: 3.5rem; width: 3.5rem;
		background-color: transparent;
		background-image: -webkit-gradient(linear, left top, right top, from(#333), to(#333)), -webkit-gradient(linear, left top, right top, from(#333), to(#333)), -webkit-gradient(linear, left top, right top, from(#333), to(#333));
		background-image: -webkit-linear-gradient(left, #333, #333), -webkit-linear-gradient(left, #333, #333), -webkit-linear-gradient(left, #333, #333);
		background-image: linear-gradient(to right, #333, #333),
			linear-gradient(to right, #333, #333),
			linear-gradient(to right, #333, #333);
		background-position: center top, center, center bottom;
		background-repeat: no-repeat;
		-webkit-background-size: 3.5rem .9rem;
		        background-size: 3.5rem .9rem;
		padding: 0;
		outline: 0;
		border: 0;
		cursor: pointer;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
		-webkit-transition: .2s;
		        transition: .2s;
	}
	
	/*  Removing Firefox's dotted outline on button */	
	nav > button::-moz-focus-inner {
		border: 0;
	}
	
	/* Theming opened nav button */	
	nav:not(.is-closed) > button {
		-webkit-transform: rotate(180deg) translateZ(0);
		        transform: rotate(180deg) translateZ(0);
		background-position: center, center, center;
	}
	
	
	/* Hide alternate text except from screen readers */
	.visually-hidden {
		position: absolute !important;
		clip: rect(1px, 1px, 1px, 1px);
		overflow: hidden;
		height: 1px;
		width: 1px;
	}
	
}




/* BONUS deco */


/* Global deco */
/* html {font-size: 62.5%;} */
body {
	background: #e3e3e3;
	color: #000;
	font-size: 1.4em;
	line-height: 1.5;
}
h1, h2, h3 {
	margin-top: 0; margin-bottom: 1rem;
	color: #345; text-shadow: 1px 1px 1px #fff;
	font-family: 'Lato', Calibri, Arial, sans-serif;
	/* font-size:90%; */
}
h2 {margin-top: 2rem;}
h3 { font-weight:normal; font-size: 1.5em; /* border-bottom:#345 1px solid; */ }
h4  { margin:0; }
a {color: #345}
hr.blueline { height:0; border-bottom:#345 1px solid; margin-bottom:1rem; }


/* orientation */
@media (orientation: landscape) and (max-device-width: 767px) {
	html,
	body {
		-webkit-text-size-adjust: 100%;
	}
}