html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	border: 0;
	font-size: 100%;
	font: inherit;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	box-sizing: border-box;
}

body {font-family: robotoregular;}


@font-face {
    font-family: 'robotoregular';
    src: url('roboto-regular-webfont.woff2') format('woff2'),
         url('roboto-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'montserratbold';
    src: url('montserrat-bold-webfont.woff2') format('woff2'),
         url('montserrat-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.logo img {display: block; margin: 40px auto 40px auto; width:32%;}

nav {text-align: center; margin: 50px auto 10px auto;}
nav li {display: inline; list-style: none;}
nav a {font-family: montserratbold; display:inline-block; margin:0 20px;font-size: 18px}
nav a {color:#4e4d4d; padding:0px; text-decoration:none;}
nav a:hover {color: #2babe2;}

.pano img {display:block; width: 100%; margin: 10px auto 10px auto;}
.panomobil img {display:none;}

.header h1 {font-family: montserratbold; font-weight: bold; display:block; font-size: 46px; color:#2babe2; text-align: center; margin: 50px auto 50px auto;}

.content {width: 1200px; margin: 0 auto 0 auto; }

#scroll_to_top {position: fixed; width: 25px; height: 25px; bottom: 30px; right: 30px;} 
#scroll_to_top img {width: 40px;}

#retour {position: fixed; width: 25px; height: 25px; bottom: 85px; right: 30px;} 
#retour img {width: 40px;}

#qui {display: inline-block; background:white; margin: 50px auto 50px auto;padding: 20px;}
#qui .suis h2 {font-family: montserratbold; float:left; width:65%; font-weight: bold; font-size: 35px; color:#2babe2; padding: 0 0 20px 0;}
#qui .suis p {float:left; width:65%; font-size: 14px; line-height: 150%; text-align: justify; color: #494949; padding:20px 20px 0 10px;}
#qui .suis h3 {font-family: montserratbold; float:left; width:65%; font-weight: bold; font-size: 20px; color:#2babe2; padding: 30px 0 0 0;}
#qui .moi img {display:block; float:right; width: 35%; margin: 30px 0 0 0;}

#formations {display: inline-block; background:white; margin: 50px auto 50px auto; padding: 20px;}
#formations .form h2 {font-family: montserratbold; float:right; width:70%;font-weight: bold; font-size: 40px; color:#2babe2; padding: 0 0 0 20px;}
#formations .form h3 {font-family: montserratbold; float:right; width:70%;font-weight: bold; font-size: 20px; color:#2babe2; padding: 40px 0 10px 20px;}
#formations .form h4 {font-family: montserratbold; float:right; width:70%;font-weight: bold; font-size: 16px; color:#4e4d4d;padding: 20px 0 0 30px;}
#formations .form a {color:#4e4d4d;}
#formations .form p {float:right; width:70%; font-size: 14px; line-height: 150%; text-align: justify; color: #494949;padding:10px 0 0 30px;}
#formations .imageform img {float:left; width: 30%;margin:30px 0 0 0}
#formations .imageformmobil img {display: none;}

#experiences {display: inline-block; background:white; margin: 50px auto 50px auto;padding: 20px;}
#experiences .exper h2 {font-family: montserratbold; float:left; width:70%;font-weight: bold; font-size: 40px; color:#2babe2; padding: 0 0 20px 0;}
#experiences .exper h3 {font-family: montserratbold; float:left; width:70%;font-weight: bold; font-size: 20px; color:#2babe2; padding: 40px 0 0 0;}
#experiences .exper h3 a {font-family: montserratbold; font-weight: bold; font-size: 20px; color:#2babe2;}
#experiences .exper h4 {font-family: montserratbold; float:left; width:70%;font-weight: bold; font-size: 16px; color:#4e4d4d; padding: 20px 0 0 20px;}
#experiences .text p {float:left; width:70%;font-size: 14px; line-height: 150%; text-align: justify; color: #494949; padding:10px 40px 0 30px;}
#experiences .exper p {float:left; width:70%;font-size: 14px; line-height: 150%; text-align: justify; color: #494949; padding:10px 40px 0 30px;}

#experiences .imageexper img {float:right; width: 30%;margin: 30px 0 0 0;}
#experiences .imageexpermobil img {display:none}

#competences {display: inline-block; background:white; margin: 50px auto 0 auto; padding: 20px;}
#competences .compet h2 {font-family: montserratbold; float:left; width:65%;font-weight: bold; font-size: 40px; color:#2babe2; padding: 0 0 20px 20px;}
#competences .compet h4 {font-family: montserratbold; text-align: center; font-weight: bold; font-size: 18px; color:#4e4d4d; padding: 10px 0 10px 40px;}
#competences .compet a {font-size: 12px; color: #494949; padding:10px 0 0 30px;margin:20px 0 0 0;}
#competences .compet p {float:left; width:65%; font-size: 14px; line-height: 150%; text-align: justify; color: #494949;padding:20px 0 0 30px;}
#competences .imagecompet img {float:left; width: 35%;margin:30px 0 0 0;}

#picto .grafillus {float:left; background:white; width:12.5%; padding: 10px;margin:20px 0 0 0;}
#picto .grafillus img {display: block; margin: 10px auto 10px auto;}
#picto .grafillus p {font-size: 12px; line-height: 150%; font-weight: bold; text-align: center; color: #494949; margin: 0 auto 0 auto;}

#picto .grafphoto {float:left; background:white; width:12.5%; padding: 10px;margin:20px 0 0 0;}
#picto .grafphoto img {display: block; margin: 10px auto 10px auto;}
#picto .grafphoto p {font-size: 12px; line-height: 150%; font-weight: bold; text-align: center; color: #494949; margin: 0 auto 0 auto;}

#picto .grafind {float:left; background:white; width:12.5%; padding: 10px;margin:20px 0 0 0;}
#picto .grafind img {display: block; margin: 10px auto 10px auto;}
#picto .grafind p {font-size: 12px; line-height: 150%; font-weight: bold; text-align: center; color: #494949; margin: 0 auto 0 auto;}

#picto .grafword {float:left; background:white; width:12.5%; padding: 10px;margin:20px 0 0 0;}
#picto .grafword img {display: block; margin: 10px auto 10px auto;}
#picto .grafword p {font-size: 12px; line-height: 150%; font-weight: bold; text-align: center; color: #494949; margin: 0 auto 0 auto;}

#picto .grafhtml {float:left; background:white; width:12.5%; padding: 10px;margin:20px 0 0 0;}
#picto .grafhtml img {display: block; margin: 10px auto 10px auto;}
#picto .grafhtml p {font-size: 12px; line-height: 150%; font-weight: bold; text-align: center; color: #494949; margin: 0 auto 0 auto;}

#picto .grafapple {float:left; background:white; width:12.5%; padding: 10px;margin:20px 0 0 0;}
#picto .grafapple img {display: block; margin: 10px auto 10px auto;}
#picto .grafapple p {font-size: 12px; line-height: 150%; font-weight: bold; text-align: center; color: #494949; margin: 0 auto 0 auto;}

#picto .grafwindows {float:left; background:white; width:12.5%; padding: 10px;margin:20px 0 0 0;}
#picto .grafwindows img {display: block; margin: 10px auto 10px auto;}
#picto .grafwindows p {font-size: 12px; line-height: 150%; font-weight: bold; text-align: center; color: #494949; margin: 0 auto 0 auto;}

#picto .grafandroid {float:left; background:white; width:12.5%; padding: 10px;margin:20px 0 0 0;}
#picto .grafandroid img {display: block; margin: 10px auto 10px auto;}
#picto .grafandroid p {font-size: 12px; line-height: 150%; font-weight: bold; text-align: center; color: #494949; margin: 0 auto 0 auto;}

#contact {display: inline-block; background:white; margin: 100px auto 20px auto;padding: 20px;}
#contact h2 {font-family: montserratbold; float:left; width:100%;font-weight: bold; font-size: 40px; color:#2babe2;}
#contact h3 {font-family: montserratbold; float:left; width:100%;font-weight: bold; font-size: 18px; color:#4e4d4d; padding: 40px 0 60px 0;}


#pictocontact .courrier {float:left; background:white; width:20%; padding: 10px;}
#pictocontact .courrier img {display: block; margin: 0 auto 10px auto;}
#pictocontact .courrier p {font-size: 12px; line-height: 150%; font-weight: bold; text-align: center; color: #494949;}

#pictocontact .tel {float:left; background:white; width:20%; padding: 10px;}
#pictocontact .tel img {display: block; margin: 0 auto 10px auto;}
#pictocontact .tel a {text-decoration:none; color: #2babe2;}
#pictocontact .tel p {font-size: 12px; line-height: 150%; font-weight: bold; text-align: center; color: #494949;}

#pictocontact .mail {float:left; background:white; width:20%; padding: 10px;}
#pictocontact .mail img {display: block; margin: 0 auto 10px auto;}
#pictocontact .mail p { font-size: 12px; line-height: 150%; font-weight: bold; text-align: center; color: #494949;margin: 0 auto;}

#pictocontact .linkedin {float:left; background:white; width:20%; padding: 10px;}
#pictocontact .linkedin img {display: block; margin: 0 auto 10px auto;}
#pictocontact .linkedin p { font-size: 12px; line-height: 150%; font-weight: bold; text-align: center; color: #494949;margin: 0 auto;}

#pictocontact .insta {float:left; background:white; width:20%; padding: 10px;}
#pictocontact .insta img {display: block; margin: 0 auto 10px auto;}
#pictocontact .insta p { font-size: 12px; line-height: 150%; font-weight: bold; text-align: center; color: #494949;margin: 0 auto;}

footer {background:#2babe2; display:inline-block; width: 100%;}
footer p {font-family: montserratbold; text-align: center; color: white;line-height: 150%; font-size: 16px; margin:40px auto 20px auto; width: 100%;}

#footernav .nav {text-align: center;margin: 10px auto 40px 0;}
#footernav .nav li {display: inline; list-style: none;}
#footernav .nav a {font-family: montserratbold; display:inline-block; margin:0 10px;font-size: 16px}
#footernav .nav a {color:white; padding:0px; text-decoration:none;}
#footernav .nav a:hover {color: #494949;}

#telechargements {display:inline-block; text-align: center; width:100%; margin: 0 auto 0 auto; padding: 0 20px 20px 20px;}
.cv {display:inline-block; padding: 10px; margin: 0 40px 0 auto;}
.cv img {display: block; margin: 0 0 10px 0;}
.cv p { font-size: 12px; line-height: 150%; font-weight: bold; text-align: center; color: white;margin: 0 auto;}

.motiv {display:inline-block; padding: 10px;margin: 0 auto 0 40px;}
.motiv img {display: block; margin: 0 0 10px 0;}
.motiv p { font-size: 12px; line-height: 150%; font-weight: bold; text-align: center; color: white;margin: 0 auto;}
.motiv p { font-size: 12px; line-height: 150%; font-weight: bold; text-align: center; color: white;margin: 0 auto;}

.mentions {margin: 50px auto 50px auto;padding: 20px;}
.mentions h2 {font-family: montserratbold; font-weight: bold; font-size: 35px; color:#2babe2; padding: 0 0 20px 0;}
.mentions h3 {font-family: montserratbold; font-weight: bold; font-size: 20px; color:#2babe2; padding: 30px 0 0 0;}
.mentions h4 {font-family: montserratbold; font-weight: bold; font-size: 16px; color:#4e4d4d; padding: 20px 0 0 10px;}
.mentions p {font-size: 14px; line-height: 150%; text-align: justify; color: #494949; padding:10px 20px 0 10px;}


.wrapper:after .header:after .content:after {display: table; content:""; clear: both; }


@media screen and (max-width: 640px)

{	.pano img {display:none;}
	.panomobil img {display:block; width: 100%; margin: 30px auto 30px auto;}
	nav li nav {float:none; width:100%; display: block; text-align: center;}
	nav a {display: block; width: 100%; margin: 10px 0 20px 0;}
	.header h1 {font-size: 14px;}
	/* #scroll_to_top {display: none;} */
	/* #retour {display: none;} */
	.content {width: 100%; margin: 0 auto 0 auto; }
	.logo img {min-width:80%; margin: 20px auto 40px auto;}
	#qui {margin: 20px auto 20px auto;padding: 20px;}
	#qui .moi a img {float:none; width:100%; margin:0; padding:20px;}
	#qui .suis h2 {width:100%; font-size: 25px;}	
	#qui .suis p {width:100%;padding:0;}
	#qui .suis h3 {width:100%; font-size: 18px;}

	#formations {margin: 20px auto 20px auto; padding: 20px;}
	#formations .form h2 {width:100%; font-size: 30px; padding: 10px 0 0 0;}
	#formations .form h3 {width:100%; font-size: 18px; padding: 40px 0 5px 0;}
	#formations .form h4 {width:100%; font-size: 14px; padding: 10px 0 10px 0;}
	#formations .form p {width:100%; font-size: 14px; padding:10px 0 0 0;}
	#formations .imageformmobil img {display: block; width: 100%; padding: 10px;}
	#formations .imageform img {display:none;}

	#experiences {margin: 0 auto 0 auto; padding: 20px;}
	#experiences .exper h2 {width:100%; font-size: 30px; padding: 10px 0 0 0;}
	#experiences .exper h3 {width:100%; font-size: 18px; padding: 40px 0 5px 0;}
	#experiences .exper h4 {width:100%; font-size: 14px; padding: 30px 0 5px 0;}
	#experiences .exper p {width:100%; font-size: 14px; padding:10px 0 0 0;}
	#experiences .imageexpermobil img {display: block; width: 100%; padding: 10px;}
	#experiences .imageexper img {display:none;}

	#competences {margin: 20px auto 20px auto; padding: 20px;}
	#competences .imagecompet img {float: none; width: 100%; padding: 0;}
	#competences .compet h2 {width: 100%; font-size: 30px; padding: 0 0 20px 0;}
	#competences .compet h4 { width: 100%; padding: 0; margin:0;}
	#competences .compet a {width: 100%; font-size: 13px;}
	#competences .compet p {width:100%; font-size: 14px;}
	

	#picto {padding: 0 20px 20px 20px;}
	#picto .grafillus {min-width:25%;}
	#picto .grafillus img {width:100%; margin:0; padding: 0;}
	#picto .grafillus p {display:none;}

	#picto .grafphoto {min-width:25%;}
	#picto .grafphoto img {width:100%;margin:0; padding: 0;}
	#picto .grafphoto p {display:none;}

	#picto .grafind {min-width:25%;}
	#picto .grafind img {width:100%; margin:0; padding: 0;}
	#picto .grafind p {display:none;}

	#picto .grafword {min-width:25%;}
	#picto .grafword img {width:100%; margin:0; padding: 0;}
	#picto .grafword p {display:none;}

	#picto .grafhtml {float:right; min-width:25%;}
	#picto .grafhtml img {width:100%; margin:0; padding: 0;}
	#picto .grafhtml p {display:none;}

	#picto .grafapple {float:right; min-width:25%;}
	#picto .grafapple img {width:100%; margin:0; padding: 0;}
	#picto .grafapple p {display:none;}

	#picto .grafwindows {float:right; min-width:25%;}
	#picto .grafwindows img {width:100%; margin:0; padding: 0;}
	#picto .grafwindows p {display:none;}

	#picto .grafandroid {float:right; min-width:25%;}
	#picto .grafandroid img {width:100%; margin:0; padding: 0;}
	#picto .grafandroid p {display:none;}
	
	#contact h3 {margin: 0 0 20px 0;}
	
	#pictocontact .contact {width:100%; margin: 0;padding: 0;}
	#pictocontact .contact h2 {width:100%; font-size: 30px;}
	#pictocontact .contact h3 {width:100%; font-size: 14px; padding: 40px 0 0 0;}

	#pictocontact .courrier {display: none;}
	#pictocontact .courrier img {display: none;}
	#pictocontact .courrier p {display:none;}

	#pictocontact .tel {width:25%; margin:0; padding: 10px;}
	#pictocontact .tel img {width:100%; margin:0; padding: 10px;}
	#pictocontact .tel p {display:none;}

	#pictocontact .mail {width:25%; margin:0; padding: 10px;}
	#pictocontact .mail img {width:100%; margin:0; padding: 10px;}
	#pictocontact .mail p {display:none;}

	#pictocontact .linkedin {width:25%; margin:0; padding: 10px;}
	#pictocontact .linkedin img {width:100%; margin:0; padding: 10px;}
	#pictocontact .linkedin p {display:none;}

	#pictocontact .insta {width:25%; margin:0; padding:10px;}
	#pictocontact .insta img {width:100%; margin:0; padding: 10px;}
	#pictocontact .insta p {display:none;}

	footer {width: 100%;}
	#footernav .nav a {margin: 5px 0 0 0;font-size: 16px}

	#telechargements {display:inline-block; width: 100%; padding: 20px; margin: 0;}
	.cv {padding: 10px; margin: 0;}
	.cv img { padding:0;}
	.cv p {margin: 0 0 10px 0;}
	
	.motiv {padding: 10px; margin: 0;}
	.motiv img { padding:0;}
	.motiv p {margin: 0 0 10px 0;}

}

@media screen and (max-width: 1024px)

{
	.header {margin: 0 auto 0 auto;padding: 10px 10px 0 10px;}
	.header h1 {font-size: 32px;}
	/* #scroll_to_top {display: none;} */
	/* #retour {display: none;} */
	.content {width: 100%; margin: 0 auto 0 auto; }
	.logo img {width:60%;}
	.pano img { margin: 50px auto 50px auto;}

	#qui .suis p {float:none; width: 100%; padding:10px;}
	#qui .moi img {margin: 0;padding: 20px;}

	#competences .compet h4 {text-align: center; font-size: 13px; padding: 10px ;}
	#competences .citation a {float:none; width: 100%;font-size: 12px; padding:10px;}
	#competences .compet p {float:none; width: 100%; padding:0;margin:20px 0 0 0;}
	#competences .imagecompet img {margin: 0; padding: 20px;}
	#competences .compet .citation p {float:left; font-size: 12px; color: #494949; padding:10px;}


	#picto {padding: 0  20px 50px 20px;}
	#picto .grafillus { width:12.5%;}
	#picto .grafillus img {width:100%; margin:0; padding: 0;}
	#picto .grafillus p {display:none;}

	#picto .grafphoto {width:12.5%;}
	#picto .grafphoto img {width:100%;margin:0; padding: 0;}
	#picto .grafphoto p {display:none;}

	#picto .grafind {width:12.5%;}
	#picto .grafind img {width:100%; margin:0; padding: 0;}
	#picto .grafind p {display:none;}

	#picto .grafword {width:12.5%;}
	#picto .grafword img {width:100%; margin:0; padding: 0;}
	#picto .grafword p {display:none;}

	#picto .grafhtml {width:12.5%;}
	#picto .grafhtml img {width:100%; margin:0; padding: 0;}
	#picto .grafhtml p {display:none;}

	#picto .grafapple {width:12.5%;}
	#picto .grafapple img {width:100%; margin:0; padding: 0;}
	#picto .grafapple p {display:none;}

	#picto .grafwindows {width:12.5%;}
	#picto .grafwindows img {width:100%; margin:0; padding: 0;}
	#picto .grafwindows p {display:none;}

	#picto .grafandroid {width:12.5%;}
	#picto .grafandroid img {width:100%; margin:0; padding: 0;}
	#picto .grafandroid p {display:none;}
	
	#contact {width:100%; margin: 20px auto 20px auto;padding: 20px;}
	#contact h2 {width:100%;}
	#contact h3 {width:100%; font-size: 14px; padding: 40px 0 0 0;}

	#contact h3 {margin: 0 0 20px 0;}

	#pictocontact .courrier {display: none;}
	#pictocontact .courrier img {display: none;}
	#pictocontact .courrier p {display:none;}

	#pictocontact .tel {width: 25%; margin: 0;}
	#pictocontact .tel img {padding:0;}
	#pictocontact .tel p {display:none;}

	#pictocontact .mail {width: 25%; margin: 0;}
	#pictocontact .mail img {padding:0;}
	#pictocontact .mail p {display:none;}

	#pictocontact .linkedin {width: 25%; margin: 0;}
	#pictocontact .linkedin img {padding:0;}
	#pictocontact .linkedin p {display:none;}

	#pictocontact .insta {width: 25%; margin: 0;}
	#pictocontact .insta img {padding:0;}
	#pictocontact .insta p {display:none;}
	
	footer {width: 100%;}
	
	#telechargements {display:inline-block; width: 100%; padding: 20px; margin: 0;}
	.cv {padding: 10px; margin: 0;}
	.cv img { padding:0;}
	.cv p {margin: 0 0 10px 0;}
	
	.motiv {padding: 10px; margin: 0;}
	.motiv img { padding:0;}
	.motiv p {margin: 0 0 10px 0;}
}