/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*--- NEW STYLES --- VIOLA --- */

/* a{text-decoration: none;}:focus{outline-style: none;} 
a:link {color: #000;text-decoration: none;}
a:visited {color:#000;outline: none;}
a:hover {text-decoration: underline;} */

a{
	font-weight:bold;
	transition: opacity 0.3s;
	-webkit-transition: opacity 0.3s;
}
a:link, a:visited{color:#ecac00;text-decoration:none;}
a:hover{text-decoration:underline;}

.yellow_tx {
	color:#ecac00;
}
.yellow_bg {
	background-color:#ecac00;
}

.vertical {
    margin: 0;
    padding: 0;
    -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
         -o-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
}

.popup_div{
		display:none;
	}
		.popup_div h3{
			font-weight:bold;
			margin-bottom:15px;
			font-size:15px;
			color:#738791;
		}


body{
	background:#FFF;
	font-size:14px;
	color:#6E6C61;
	font-family:"Source Sans Pro", Arial, sans-serif;
	/* #4E4C41; */
}

	h2{
		font-size:24px;
		color:#222;
	}
	
	h3{
		font-size:33px;
		font-weight: bold;
		letter-spacing: 1.2px;
		text-transform: uppercase;
		color:#222;
	}

	/* centered content in different sections (incl header)*/
	header div, section{
		max-width:1000px;
		margin:auto;
	}
	
	section{
		position:relative;
		padding:80px 0;
	}	
		article p{
			margin:20px 0;
			line-height:22px;
		}
		
	hr{
		border:1px solid #ecac00;
	}
	

header{
	position:fixed;
	width:100%;
	background:#000;
	/* font-size:28px; */
	/* font-family:PT mono, georgia; */
	
	z-index:100;
	padding:25px 0;
	border-bottom:1px solid #ecac00;
	
}
	
	header img{
		display:inline-block;
		vertical-align:middle;
		width:175px;
		transition: opacity 0.3s;
		-webkit-transition: opacity 0.3s;
	}
	header img:hover{
		opacity:0.8;
	}
	
	header nav{
		display:inline-block;
		width:75%;
		vertical-align:middle;
		text-align:center;
		letter-spacing: .8px;
		text-transform: uppercase;
		text-align:right;
	}
		header nav a{
			display:inline-block;
			margin-left:30px;
			font-size:16px;
			font-weight:bold;
			transition: opacity 0.3s;
			-webkit-transition: opacity 0.3s;
		}
		header nav a:hover{text-decoration:none;opacity:0.8;}
		header nav a.menu_selected {
			opacity:0.8;
			/* text-decoration:underline; */
			cursor:default;
			transition: none;
			-webkit-transition: none;
		}
	

#main{
	text-align:left;				
}
	
	.section_wrapper:nth-child(odd ) {
		background-color:#f2f2f2;
	}
	
	#slogan{
		padding-top:120px;
		background-color:#000;
		color:#FFF;
	}
		#slogan section{padding:0;}
		#slogan section div{
			height:500px;
			width:1000px;
			display:table-cell;
			vertical-align:middle;
			text-align:center;
		}
		
		
		#slogan h1, #slogan h2{color:#FFF;}
		#slogan h1{
			font-size: 26px;
			line-height:46px;
		}
		#slogan h2{
			margin-top:40px;
			font-size: 16px;
		}
	
	#infos{
		text-align:center;
	}
		#decoration{
			margin:20px 0;
			width:100%;
		}
			#decoration hr{
				display:inline-block;
				vertical-align:middle;
				width:30%;
			}
			#decoration img{
				margin:0 20px;
				display:inline-block;
				vertical-align:middle;
				/* width:20%;   MEDIA querie */
			}
		
		#infos article{
			width:80%;
			margin:auto;		
		}
		
			#infos article p{
				margin:50px 0;
				font-size:16px;
				line-height:25px;
			}
	
	
	.section-head {
		margin-bottom : 20px;
	}
		.section-head h3{
			text-align:center;
		}
		.section-head p{
			text-align:center;
			color: #738791;
			font-size: 12px;
			text-transform: uppercase;
		}
	
	section .section-flex{
		text-align:left;
		position:relative;
		display:flex;
		align-items: top;
		padding:20px 0;
	}
	
	section .section-flex h2{
		padding:5px 0 5px 50px;
	}
		
	#competences, #services, #contact{padding:20px 0 0;}	
	
		/* 	#competences */	
		#competences .section-flex {
			justify-content:space-around;
		}
			#competences article{
				width:35%;
			}
		
			#competences .section-flex:nth-child(1) article:nth-child(1) h2{ background: url(../assets/php-32.png) left center no-repeat;}
			#competences .section-flex:nth-child(1) article:nth-child(2) h2{ background: url(../assets/html5-32.png) left center no-repeat;}
			#competences .section-flex:nth-child(2) article:nth-child(1) h2{ background: url(../assets/jquery-32.png) left center no-repeat;}
			#competences .section-flex:nth-child(2) article:nth-child(2) h2{ background: url(../assets/native-32.png) left center no-repeat;}
		
		
		/* 	#services */	
		#services .section-flex {
			justify-content:space-between;
		}
			#services .section-flex article h2{padding-left:0;}
			/* #services .section-flex article:nth-child(1) h2{ background: url(../assets/projet-32.png) left center no-repeat;}
			#services .section-flex article:nth-child(2) h2{ background: url(../assets/developpement-32.png) left center no-repeat;} */
			
			#services article{
				width:45%;
			}¨
				
						
		
	
	/* 	#real */	
	#real section {}
	#real section{
		padding:0;
		max-width:1400px;
		position:relative;
	}
		#real .see-more{
			position:absolute;
			bottom:30px;
			right:-100px;
			font-size:15px;
			text-transform: uppercase;
			transform: rotate(270deg);
			transform-origin: bottom left;
			z-index:12;
			background:#FFF;
			background-color: rgba(255, 255, 255, 0.6);
		}
			.see-more a{ padding:6px 0 10px 45px; transition: opacity 0.3s; -webkit-transition: opacity 0.3s;}
			.see-more a:link,.see-more a:visited{color:#222;text-decoration:none;}
			.see-more a:hover{text-decoration:none;opacity:0.5;}
			.see-more .collapsed { background:url(../assets/see-more-32-left.png) no-repeat; }
			.see-more .expanded { background:url(../assets/see-more-32-right.png) no-repeat; }
			
		
		#real .line_wrap{
			text-align:center;
			position:relative;
			display:flex;
			align-items: center;
		}
		#real .line_wrap div, #real .line_wrap article, #real .line_wrap figure{
			width:49%;
			height:100%;
		}
			
			#real .line_wrap:nth-child(n+3){display:none;}
			
			#real .line_wrap:nth-child(even) > .image_wrap{order: -1;	}
			
			#real .line_wrap .image_wrap{
				align-self: flex-start;
			}
			#real .line_wrap .image_wrap div{
				overflow:hidden;
				position:relative;
				width:100%;
			}
			#real .line_wrap img{
				z-index:10;
				width:100%;
				/************ voir filter svg *********/
				filter: grayscale(100%);
				-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
				/* filter: saturate(0.5);
				-webkit-filter: saturate(0.5);
				-moz-filter: saturate(0.5);
				-ms-filter: saturate(0.5);
				-o-filter: saturate(0.5); */
			}
			#real .line_wrap div:hover .yellow_bg, #real .line_wrap div:focus .yellow_bg{
				opacity:0.5;
			}

			#real .line_wrap .yellow_bg{
				z-index:11;
				position:absolute;
				width:100%;
				height:100%;
				opacity:0;
				transition: opacity 0.5s;
				-webkit-transition: opacity 0.5s;
			}
			
			#real .line_wrap article{
				width:37%;
				height:96%;
				padding:0 6%;
				text-align:center;
			}
				
				#real .line_wrap article h4{
					margin: 18px 0 30px;
					font-family: Georgia;
					font-style: italic;			
				}			
				#real .line_wrap article p{
					margin:0;
				}
				#real .line_wrap article hr{
					width:100px;
					border:2px solid #f2f2f2;
					margin:auto;
				}
				#real .line_wrap article .sub_desc{
					margin:40px 0 40px;
				}
				
				#real .line_wrap article .site_tech{
					width:100%;
				}
					#real .line_wrap article .site_tech p{
						padding-bottom:0;
					}
					#real .line_wrap article .site_tech span{
						text-transform: uppercase;
					}
				#real .line_wrap article .show-site{
					float:right;
					padding:5px 20px 5px 5px;
					font-size:20px;
					font-variant: small-caps;
				}
				
	#services h3, #contact h3{
		text-align:center;
		margin-bottom:30px;
	}
	
	/*contact form / div*/
	
	#contact form{
		width:500px;
		margin:50px auto 20px;
	}
		#contact h3{
			font-size : 22px;
		}
	
		#contact input,#contact textarea{
			padding-bottom:8px;
			border:none;
			border-bottom:1px solid #222;
			width:500px;
			margin-bottom:90px;
			font-size:16px;
		}
			/* #contact input:nth-child(1), #contact input:nth-child(2){width:300px;} */
		#contact textarea{
			padding:10px;
			width:480px;
			border: 1px solid #222;
			margin-bottom:50px;
			height:300px;
		}
		#contact form div{
			text-align:center;
		}
			#contact button{
				border:1px solid #222;
				font-weight:bold;
				cursor:pointer;
				padding:20px 12px;
				text-transform: uppercase;
			}
			
		#form_status{
			font-size:18px;
			padding-top: 20px;
		}
	
footer{
	width:100%;
	background:#000;
	border-top:1px solid #ecac00;
	padding:40px 0;
	text-align:center;
	font-size:20px;
	font-weight: bold;
	font-variant:small-caps;
	color:#ecac00;
}
footer span{
	opacity: 0.7;
}
footer a{
	font-style:italic;
}


		
/* MEDIA QUERIES */

@media screen and (max-width: 1000px){

	header nav{
		width:auto;
	}

	#services .section-flex {
		justify-content:space-around;
	}
	
	header{
		padding: 0;
	}
	header img{
		width:25%;
	}
	header nav{
		width:65%;
		text-align:left;
		line-height:30px;
		letter-spacing: 0;
	}
	header nav a{
		margin-left:10px;
	}
	
	section h2{font-size:20px;}
	
	section h3{font-size:18px;}
	
	article p{margin:5px 0;}
	
	#slogan section div {height: 230px; padding-bottom:20px;}
	#slogan h1{font-size:22px;}
	#slogan h2{font-size:18px;}
	
	#decoration{
		margin-top:30px;
	}
	#infos img{width:20%}
	#infos article{width:80%}
	
	#real .line_wrap article{
		width:45%;
		padding:2%;
	}
	#real .line_wrap article h4 {
		margin: 15px 0 20px;
	}
	#real .line_wrap article .sub_desc {
		margin: 25px 0;
		/* text-align: justify; */
	}
	#real .line_wrap article .site_tech{
		padding-bottom:20px;
	}
	
	#competences article{width:45%;}
	
}

@media screen and (max-width: 850px)
{
	section{
		padding: 20px 0 10px;
	}
	
	article p{margin:5px 0;}

	section .section-head{margin-bottom:20px;}
	section .section-flex{display:block;padding-top:0;}
	section .section-flex article{padding-bottom:20px;}
	
	#competences article, #services article{padding-bottom:20px;width:80%; margin:auto;}
	#competences article h2, #services article h2{font-size:18px;}
	#infos article p, #competences article p, #services article p{text-align:justify;margin:0;}
	
	#real .line_wrap {display:block; border-top: 1px solid #ddd;	padding: 10px 0 0;}
	#real .line_wrap:nth-child(1) /* article */ {border-top:none;}
		#real .line_wrap article{width:90%; padding:10px 0 0;margin:auto;}
		#real .line_wrap .image_wrap{width:90%;margin:0 auto 25px;}
		#real .see-more{ right: -112px;}
	
	
}

@media screen and (max-width: 630px)
{
	header img{
		width:120px;
	}
	header nav{
		width:100%;
		/* white-space: nowrap; */
		
	}
	header nav a{
		font-size:13px;
	}
	
	#slogan section div {height: 150px;}
	#slogan h1{font-size:18px;}
	#slogan h2{font-size:14px;}
	
	#infos article, #competences article, #services article{width:90%;}
	#infos article p, #competences article p, #services article p{font-size:14px;margin:0 0 20px;}
	
	#main #content{
		padding:25px 15px ;
		margin-left:0;
	}
		section h2, #main #content #infos h2{
			font-size:16px;
		}
		.section-head p{
			text-transform: none;
		}
		section .section-flex {padding-bottom:0;}

	footer{
		font-size:15px;
	}
	
}

@media screen and (max-width: 500px)
{
	#slogan h1{margin-top:20px; padding:0 10px; line-height:22px; text-align:left;}
	#slogan h2{margin-top:20px; padding:0 10px; text-align:left;}
	
	#contact form{
		width: auto;
		padding:2%;
	}
	#contact form input, #contact form textarea{
		width:95%;
	}
}