body{	
		display: flex;
		margin: 0;
		width: 100%;
		font-family: 'Open Sans';
	}

	header{
		display: flex;
		text-align: left;
		margin-left: 10px;	
		margin-bottom: 60px;
		margin-top: 40px;
		font-size: 1.3em;
	}
	
	.bordure{
		border-bottom: 2px solid #fa8100;
	}

	h1{
		font-size: 2em;
		margin: 30px 30px 0px 0px;
		font-weight: normal;
	}

	.yellow{
		color: #fa8100 ;	
		font-weight: bold;
	}

	header h2{
		margin-right: 70px;
		margin-top: 0;
		font-weight: normal;
	}

	aside{
	    margin: 0;
	    display: flex;
	    flex-direction: column;
	    position: relative;
	    width: 240px;
	    background-color: #fa8100;
	  	padding-top: 20px;
	}

	aside p{
		line-height: 1em;
		color:black;
	}

	h2+p{
		margin-right: 20px;
		margin-left: 20px;
		line-height: 1.5em;
		text-align: justify;
	}

	#photocv{
		text-align:center;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	#photocv a img{
		border-radius: 100%;
		width: 150px;
		height: 150px;
		object-fit: cover;
		object-position: top;
		border: 3px orange solid;
	}

	aside h2{
		font-size: 1.2em;
		text-align: center;
		color: #fa8100;
		border: 3px solid;
		background-color: black;	
	}

	aside h3{
		line-height: 1em;
		font-size: 1em;
		color:black;
		margin-bottom: 5px;
	}

	h3+p{
		margin-top: 0;
	}

	aside li{
		margin-bottom: 25px;
	}

	#contact-list{
		list-style: none;
		margin-right: 15px;
		margin-left: 15px;
		padding-right: 5px;
		padding-left: 5px;
		padding-top: 1px;
	}

	#hobby{
		position: absolute;
		bottom: 0;
		left:0;
		width: 100%;
	}

	section h2{
		text-align: left;
		font-size: 1.3em;
		text-align: left;
	}

	.tv{
		width: 40px;
		height: 40px;
		border:2px solid black;	
		border-radius: 50%;
	}

	.fa-television{
		padding-top: 5px;
		width: 40px;
		height:40px;
	}

	.sun{
		width: 40px;
		height: 40px;
		border:2px solid black;	
		border-radius: 50%;
	}

	.fa-sun-o{
		padding-top: 5px;
	}

	.bicycle{
		width: 40px;
		height: 40px;
		border:2px solid black;	
		border-radius: 50%;
	}

	.fa-bicycle{
		padding-top: 5px;
	}

	#logo{
		display:flex;
		justify-content: space-between;
		padding-top: 10px;
		margin-left: 6px;
		margin-right: 6px;
		margin-bottom: 10px;	
		text-align: center;
		font-size: 0.9em;
	}

	.fa-book{
		color:#fa8100;
		padding-top: 10px;
		margin-right: 10px;
	}

	.fa-suitcase{
		color:#fa8100;
		padding-top: 10px;
		margin-right: 10px;
	}

	.fa-address-book-o{
		color:#fa8100;
		padding-top: 10px;
		margin-right: 10px;
	}

	.fa-dot-circle-o{
		display:flex;
		color:#fa8100;
		margin-top: 18px;
		margin-right: 17px;
		width:5px;
		font-size: 10px;
	}

	.fa-circle{
		display:flex;
		color:#fa8100;
		margin-top: 18px;
		margin-right: 17px;
		width:5px;
		font-size: 10px;
	}

	.formation{
		display: flex;
		width:80%;
		box-shadow: 0px 2px #fa8100;
	}
	
	#container{
		padding:20px 40px 20px 60px;
		width: calc(100% - 320px);
	}

	#formation-list{
		padding-left: 0px;
		padding-bottom: 50px;
		width:80%;
	}

	#formation-list li{
		display:flex;
		flex-direction: row;
		justify-content: space-between;
	}

	#dotdate1{
		display: flex;
		flex-direction: row;
	}

	#dotdate2{
		display: flex;
		flex-direction: row;
	}

	#dotdate3{
		display: flex;
		flex-direction: row;
	}

	#dotdate4{
		display: flex;
		flex-direction: row;
	}

	.sec-droite{
		padding-bottom: 5px;
		padding-top: 10px;	
		margin-bottom: 10px;
		text-align: justify;
		width: 60%;
	}

	.sec-gauche{
		display: flex;
		flex-direction: row;
	}

	.sec-gauche p{
		font-weight: bold;
	}

	.sec-gauche1 p{
		font-weight: bold;
	}

	.sec-gauche1{
		display: flex;
		flex-direction: row;
	}

	.exp-professionnelles{
		display: flex;
		width: 80%;
		box-shadow: 0px 2px #fa8100;
	}

	#exp-professionnelles-list{
		width:80%;
		padding-left: 0px;
		padding-bottom: 50px;
	}

	#exp-professionnelles-list li{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.sec-gauche1 p{
		color:black;
		font-size: 14px;
		margin-top: 10px;
	}

	.sec-gauche p{
		font-size: 14px;
	}

	.recommandations{
		display:flex;
		width: 80%;
		box-shadow: 0px 2px #fa8100;
	}
	
	#recommandations-list li{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		list-style: none;
	}

	#recommandations-list{
		list-style: none;
		padding-left: 0;
		width:80%;
	}

	.recommandations1{
		padding-right: 80px;
		margin-right: 40px;
	}

	h4{
		margin:0;
		padding-top: 5px;
		font-weight: bold;
	}



	@media all and (max-width: 1024px){
    
	body{
		width:auto;
		display:flex;
		flex-direction: column-reverse;
	}

    aside{   
        width:100%;
        margin: 0px 0px 0px 0px;
        text-align:center; 
        display:flex; 
        flex-direction: column;    
    }

    header{
    	margin-left: 0;
    	margin-top: 0;
    	padding-left: 10px;
    }
    
    #photocv{
    	margin-bottom: 20px;
    	margin-left: 5px;
    }
    
    aside h2{
    	height: 30px;
    	margin-top: 0px;
    	margin-bottom: 0px;
    	padding-top: 2px;
    }

    #logo{
    	display:flex;
    	flex-direction: row;
    	margin-top: 0px;
    	padding:20px 50px 20px 50px;
    	height: 50%;
    }

    #hobby{
		position: relative;
	}

    aside h3{
		line-height: 0.2em;
		color:black;
	}
	
	#container{
    	width:100%;
    	padding:0;
    }
	
	.recommandations1{
		padding-right: 80px;
		margin-right: 0;
	}

	#recommandations-list li{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		list-style: none;
		padding-left: 10px;
	}
	
	#formation-list{
		width:95%;
		padding-left: 10px;
	}

	.formation{
		width:100%;
		padding-left: 10px;
	 }

	#exp-professionnelles-list{
		width:95%;
		padding-left: 10px;	
	}

	.exp-professionnelles{
		width: 100%;
		padding-left: 10px;
	}

	 .recommandations{
		width: 100%;
		padding-left: 10px;
	}

	@media all and (max-width: 480px){

	#recommandations-list li{
		display: flex;
		flex-direction: column;
	}

	#exp-professionnelles-list li{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	#formation-list li{
		display:flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.sec-droite{
		width:100%;
	}

	#dotdate{
		display:flex;
		flex-direction: row;
	}

	section h2{
		font-size: 1.1em;
	}
}
}