/* éléments principaux */

body
{
	background: url(images_cv/fond-site-blanc.jpg) fixed ;
	font-family: 'Trebuchet MS', Arial, san-serif; 
	color: black;
	
}

#bloc_page
{
	width: 900px;
}

.titre
{
  text-align: center;
  color: #FFBB00;
  font-size: 2.1em;
  margin-bottom: -20px;
  line-height: 1.5em;
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 5px;
}

p
{
  text-align: left;
  font-weight: bold;
}


/* Make sure that padding behaves as expected */
* {box-sizing:border-box}

/* Container for skill bars */
.container {
  width: 95%; /* Full width */
  background-color: #ddd; /* Grey background */
}

.skills {
  text-align: right; /* Right-align text */
  padding-top: 10px; /* Add top padding */
  padding-right: 25px;
  padding-bottom: 10px; /* Add bottom padding */
  color: white; /* White text color */
}

.html {width: 90%; background-color: #4CAF50;} /* Green */
.css {width: 80%; background-color: #2196F3;} /* Blue */
.francais {width: 100%; background-color: rgba(60, 90, 153, 0.9);} 
.anglais {width: 90%; background-color: rgba(60, 90, 153, 0.9);}
.espagnol {width: 50%; background-color: rgba(60, 90, 153, 0.9);}
.office {width: 90%; background-color: rgba(60, 90, 153, 0.9);}
.RS {width: 85%; background-color: rgba(60, 90, 153, 0.9);}
.Mailchimp {width: 90%; background-color: rgba(60, 90, 153, 0.9);}
.Photoshop {width: 70%; background-color: rgba(60, 90, 153, 0.9);}
.facebook {width: 70%; background-color: rgba(60, 90, 153, 0.9);}
.HTML3 {width: 65%; background-color: rgba(60, 90, 153, 0.9);}

.competences
{
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  margin-bottom: 6px;
}

.capacite
{
  flex: 1;
}

#skills
{
  width: 100%;
}

#blabla
{
  text-align: right;
  align-self: flex-start;
  object-fit: contain;
  flex: 1;
}

#blabla img
{
  width: 40%;
  height: auto;
 margin-right: 25%;
 margin-top: 25px;
}

#visu
{
  text-align: center;

}

#visu img
{
  width: 75%;
  height: auto;
  margin-top: 20px;
  margin-bottom: -10px;
  transition: .3s ease-in-out
}

#visu img:hover
{
  margin-right: -10px;
}

/* LES QUERIES RELATIVES TAILLES ECRANS */
@media all and (max-width: 1280px)
{
  #bloc_page
  {
    width: auto;
  }

  .competences
  {
    flex-direction: column-reverse;
  }

  #blabla img
  {
    display: none;
  }