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

	.realisation_ordi1 {
		width: 550px;
	}

	.realisation_ordi2 {
		margin-top:50px;
		width: 450px;
}


	h2{
		font-size: 25px;
	}
}



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

	.realisation_titre {
		margin-top: 0px;
		font-size: 30px;
	}

.circle {
	 margin-top: 20px;
	 margin-right: 20px;
  	 width: 150px;
  	 height: 150px;
  	 
}

.realisation_ordi {
	margin-top: 20px;
	width: 280px;
}

.realisation_technique {
	font-size: 18px;
}

.skills-html {
	

}



}

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


.bar-main-container {
	width: 350px;
}

.bar-percentage {
	padding: 9px 10px;
	width: 15%;

}

.mathieu-petit {
	width: 50px;
	transition: width 2s;
}

.mathieu-anim-petit {
	width: 50px;
	transition: width 2s;
	}


.realisation {
	
	margin: 0;
	padding: 20px;
}

.realisation2 {
	
	margin: 0;
	padding: 20px;
}

}

@media screen and (max-width: 767px)
{
	.card {
		margin: auto;
	}
}


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

		.realisation_ordi1 {
		width: 450px;
	}

.realisation_ordi2 {
	width: 400px;
}


}

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

	.mathieu-img {
	width: 120px;
}

	.mathieu-anim {
	width: 120px;
}

h1 {
	font-size: 40px;

}
h2{
	font-size: 20px;
}



.bar-main-container {
	width: 220px;
}

.bar-percentage {
	padding: 9px 5px;
	width: 19%;

}



.skills-html {
	font-size: 14px;
	margin-bottom: 15px;
	width: 100%;
}
.skills-css {
	font-size: 14px;
	margin-bottom: 15px;
	width: 100%;
}
.skills-java {
	font-size: 14px;
	width: 100%;
}
.skills-php {
	font-size: 14px;
	width: 100%;
}
.skills-photo {
	font-size: 14px;
	width: 100%;
}


.realisation_titre{
	font-size: 25px;
}

.realisation_activite{
	font-size: 20px;
}

.realisation_technique{
	font-size: 18px;
}

.realisation_utilisation{
	font-size: 15px;
}
.realisation_ordi {
	width: 250px;
}

}


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

		.realisation_ordi1 {
		width: 300px;
		margin-top: 50px;
	}

		.realisation_ordi2 {
		width: 300px;
		margin-top: 50px;
	}


	
	#contact {
		margin-top: 10px;
		padding: 4px 4px;
	}

}

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


	.circle {
	 
	 margin: auto;
  	 width: 120px;
  	 height: 120px;
    	 
	}

	.modal-info {
		font-size: 20px;
	}

	.info-modal {
		font-size: 15px;
	}

}

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

	.circle {
	 
	 margin: auto;
  	 width: 100px;
  	 height: 100px;
    	 
}
	.realisation_ordi {
	width: 200px;
}

	.theme1 {
		font-size: 17px;
	}

	.mathieuboyer{
		font-size: 25px;
	}

	.developpeurweb{
		font-size: 15px;
	}

	.pdf{
		font-size : 15px;
		
	}

	#mat {
		font-size: 15px;
	}


	.realisation {
	
	height: 400px;
	padding: 5px;
}

.realisation2 {
	
	height: 400px;
	padding: 5px;
}

.container {
	padding: 0;
}

.profile_competence {
	text-align: justify;
	padding-left: 5px;
	padding-right: 5px;
}

}