/******MOBILE FIRST******/

/********************************************
CSS COMMUN
********************************************/
*{
	box-sizing:border-box;
}

html {
    font-size: 62.5%;
}

body {
    color: #666;
	font-family: "Open Sans";
	font-size:1.6rem;
	background-color: rgb(242, 248, 248);
	text-align: center;
	
}

:hover {
	 transition: all .2s ease 0s;
}

/**********   HEADER    ********/
header{
	background-image: url("../img/fond5.png");
	background-repeat: no-repeat;
	background-size:cover;
	background-position: left;
	color:rgb(5, 5, 5);
	text-align: center;
	padding:1px;
}

header div div{
	display: none;
}

header>img:nth-child(1){
	display: none;
}

header p{
	font-family: 'Amaranth', sans-serif;
	font-size:2.8rem;
	margin-top: 0;
	padding-top:0;
	padding-bottom:0;
	background-color:rgba(242, 250, 249, 0.616);
}

header div div img{
	/*width: 15%;*/
	width: 60px;
	margin: 0 auto 20px;
	
		
}

/**********   LES NAV    ********/

header nav{
	/*margin-top:110px;*/
	margin-top:20px;
	
}
header nav a{
	
	display:flex;
	flex-direction: column;
	text-align: center;
	margin: 0px 10px 10px;
	color: #96f2f2;
	opacity:0.5;
	font-family: 'Amaranth', sans-serif;
	font-size:12px;
	
}

a{
	text-decoration: none;
}

footer nav:last-of-type div {
	display:flex;
	justify-content: space-evenly;
}

footer nav:first-of-type {
	background-image: url("../img/fond5.png");
	background-repeat: no-repeat;
	background-size: cover;
	padding-top:30px;
	padding-bottom:30px;
	padding-right: 10px;
	text-align: center;
	font-size:12px;
}

footer nav:last-of-type {
	padding-top:30px;
	padding-bottom:30px;
	
}

footer nav:first-of-type a{
	display:flex;
	flex-direction: column;
	opacity:0.5;
	color: #96f2f2;
	padding:10px;
}

footer nav a:hover{
	opacity:1;
}

footer nav:last-of-type a{
	flex-direction: column;
	flex-wrap: nowrap;
}

footer nav i{
	margin-bottom: 10px;
	color:blue;
}


/************   MAIN **********/
main{
	line-height: 1.8;
	font-size: 12px;
	
}

.slider{
    display:none;
}

/*section div.contenair{
	padding:30px;
	background-color: red;
}*/

#freelance section li{
	margin-left:50px;
	text-align: left;
}

#index section li{
	margin-left:10px;
	text-align: left;
}

#index li span{
	text-decoration: underline;
}

#aide section div div img{
	display: none;
}

h1{
	font-size:2.2rem;
	font-family: 'Amaranth', sans-serif;
	color:black;
}

/***** page contact *****/
.cover{
	background:#CCC; 
	
}
h2.contact { 
	font-size: 50px; 
	color: blue; 
	height: 105px; 
	background-image: url("../img/contact.png");
	background-repeat: no-repeat;
	text-align: center;
		
}

p.contact { 
	font-size: 24px; 
	margin-bottom: 15px; 
	line-height: 36px; 
	color: #4b4b4b; 
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

#contact { 
	margin-bottom: 0px; 
}

input[type="text"] { 
	width: 400px; 
}

textarea {
	width: 600px; 
	height: 275px; 
}

label { 
	color: blue; 
}

input, textarea { 
	background-color: rgba(255, 255, 255, 0.4); 
	border: 5px solid rgba(122, 192, 0, 0.15); 
	padding: 10px; 
	color: #4b4b4b; 
	font-size: 24px; 
	margin-bottom: 15px; 
	margin-top: -10px; 
}

input:focus, textarea:focus { 
	border: 5px; 
	background-color: rgba(255, 255, 255, 1); 
}

input[type="submit"] { 
	border: none; 
	cursor: pointer; 
	color: #fff; 
	font-size: 24px; 
	background-color: blue; 
	padding: 5px 36px 8px 36px; 
	border-radius: 10px; 
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); 
	border-bottom: 1px solid rgba(0, 0, 0, 0.4); 
	border-top: 1px solid rgba(255, 255, 255, 0.6);
	background: linear-gradient(blue, skyblue);
}

input[type="submit"]:hover { 
	color: #fff; 
	border-bottom: 1px solid rgba(0, 0, 0, 0.4); 
	background-color: #ff5400;
	background:linear-gradient(#c34000, #ff5400);
}

input[type="submit"]:active { 
	top: 1px; 
}

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

footer{
	background-position: center bottom;
	margin-top:30px;
}




/************    C@media screen  **************/
/*****************************************************/


/*TABLET*/
@media screen and (min-width: 768px){
	/*HEADER*/

	
	header{
		background-image: url("../img/fond2.jpg");
		background-repeat: no-repeat;
		position:relative;
		background-size: cover;
		background-position: left;
		color:rgb(5, 5, 5);
		text-align: center;
		padding:0 0 20px;
		
		
	}

	
	header div div p{
		position:relative;
		background-color: transparent;
		
	}
	
	header div div{
		position: absolute;
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding-left:20px;
		padding-right:20px;
		top:10;
	}

	header nav{
		display: flex;
        flex-direction: row;
        justify-content: space-between;
		padding-top:0px;
		margin-top:60px;
	}

	header nav a{
		margin: 80px 40px 0px 20px;
		color:white;
		opacity:2;
		font-size: 14px;
	}

	header nav a:hover{
		background-color: #96f2cc;
		color:blue;
	}
	
	body{
		background-image:  url("../img/body3.jpg");
		background-repeat: no-repeat;
		background-size:cover;
	}

	main{
		font-size:1.4rem;
		color:whitesmoke;
	}

	h1{
		font-size:2.8rem;
		color: blue;
	}

	

	/****   COMMUN *********/

	main > div{
		display:block;
	}

	article{
		height: 350px;
		width:350px;
		float: right;
		
	}
	.slider {
        background-color: transparent;
        box-shadow: 0 0 25px rgba(0,0,0,0.2);
        display: block;
        margin: 50px 50px 0;
		padding: 10px;
		
       
    }

    .flexslider {
        border: 0;
        margin: 0;
    }
	
	section{
		margin-top:40px;
		margin-left:60px;
		margin-right: 60px;
	}
	
	h2{
		font-size:1.8rem;
	}
	#index section P{
		font-size:1.8rem;
	}

	#freelance section P{
		font-size:1.8rem;
	}

	#freelance section li{
		margin-left:80px;
	}

	#index section li{
		margin-left:0px;
		
	}

	#aide section div div img{
		display: block;
	}

	/***** page contact *****/
	.cover{
		width:700px; margin:auto; 
		padding-left:60px;
	}


/******** FOOTER  *****************/
	
	footer nav{
		padding-left:20px;
		padding-right:20px;
		font-size: 10px;
		
	}

	footer nav:first-of-type {
		background-image: none;
	}
	
	footer nav:first-of-type a{
		display:flex;
		flex-direction: column;
		font-size: 13px;
	}

	footer nav div{
		display:flex;
		flex-direction:row;
		justify-content: space-evenly;
		text-align: center;
		padding-left:20px;
		padding-right:20px;
		
	}

	footer nav i{
		font-size:2.2rem;
			
	}
	
}

/*DESKTOP*/
@media screen and (min-width: 1025px){

	
	.contenair {
        margin: 0 auto;
        max-width: 1100px;
	}
	
	
	#freelance section li{
		margin-left:400px;
	}

	#index section li{
		margin-left:150px;
		
	}

	main{
		font-size:1.7rem;
		
	}

	footer nav:first-of-type a{
		font-size:16px;
	}

}

@media screen and (min-width: 1220px){

	

	header nav{
		padding: 0;
		margin: 50px 10px 10px;	
		font-size: 15px;
	}

		
}