/* FORMATION */

#formation{
    width: 100%;
    margin: auto;
    background-color: rgba(212,212,212,0.8);
}
.formation{
    width: 50%;
    margin: auto;
    padding: 10px 0 40px 0;
}

.cadreformation{
    background-color: rgb(255,255,255);
    box-shadow: 3px 3px 2px gray;
    padding-bottom: 10px;
}

.afpaimg, .openclassroomsimg, .diplomeimg
{
    display: block;
    margin: auto;
    padding-bottom: 10px;
}
.afpaimg, .openclassroomsimg, .diplomeimg
{
    -webkit-transition:-webkit-transform .9s; 
    -moz-transition:-moz-transform .9s;       
    -o-transition:-o-transform .9s;           
    -ms-transition:-ms-transform .9s;        
    transition:transform .9s;
}
  .afpaimg:hover, .openclassroomsimg:hover, .diplomeimg:hover{
    -webkit-transform:rotate(360deg); 
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg); 
    -ms-transform:rotate(360deg); 
    transform:rotate(360deg);
}

.greta, .lycee, .formationopenclassrooms, .formationafpa, .formationafpa2{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.greta, .formationafpa{
    border-bottom: 1px silver solid;
}
.greta>p, .lycee>p, .formationopenclassrooms>p, .formationafpa>p, .formationafpa2>p{
    width: 40%;
    margin: auto;
    padding-bottom: 10px;
}

#modules{
    width: 100%;
    margin: auto;
    background-color: rgba(0,0,0,0.7);
    color: white;
    padding-bottom: 10px;
}
.modules{
    width: 50%;
    margin: auto;
    padding: 10px 10px 40px 10px;    
}

.cadremodules{
    background-color: rgba(40,40,40);
    box-shadow: 3px 3px 2px black;
    padding: 20px;
}

    /* boutons */

.boutonsdocs{
    text-align: center;
    padding: 20px;
}

button{
    padding: 10px;
    box-shadow: 2px 2px 1px black;
    margin: 20px;
}
button:hover{
    background-color: silver;
}
.boutons{
    text-decoration: none;
    color: black;
    font-size: 14px;
    font-weight: bold;
}

/* EXPERIENCE */

#experience, #experience3{
    width: 100%;
    margin: auto;
    background-color: rgba(212,212,212,0.8);
}
.experience{
    width: 80%;
    margin: auto;
    padding: 10px 10px 40px 10px;  ;
}
.experience3{
    width: 60%;
    margin: auto;
    padding: 10px 10px 40px 10px;  ;
}

.cadreexperience{
    background-color: rgb(255,255,255);
    box-shadow: 3px 3px 2px gray;
    padding: 20px;
}

.logosentreprises
{
    margin-right: 20px;
    box-shadow: 3px 3px 2px gray;
    float: left;
    margin-bottom: 10px;
}

.triexperiences
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: justify;
}

.bloc4, .bloc5
{
    width: 50%;    
    margin-top: 20px;
    padding: 20px;
}
.bloc4{
    border-right: 3px gray ridge;
}

.experiencepro
{
    border-bottom: 3px silver dashed;
    margin-bottom: 20px;
}

/* suite expérience */

#experience2{
    width: 100%;
    margin: auto;
    background-color: rgba(0,0,0,0.7);
    color: white;
    padding-bottom: 10px;
}
.experience2{
    width: 80%;
    margin: auto;
    padding: 10px 0 40px 0;
}

.cadreexperience2{
    background-color: rgba(40,40,40);
    box-shadow: 3px 3px 2px black;
    padding: 20px;
}

/* SKILLS */

#skills{
    width: 100%;
    margin: auto;
    background-color: rgba(212,212,212,0.8);
}
.skills{
    width: 60%;
    margin: auto;
    padding: 10px 10px 40px 10px;  ;
}

h5{
    font-size: 20px;
    font-weight: bold;
}

.langages{
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.imglangages{
    padding-bottom: 20px;
    -webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.imgagrandie{
    padding-bottom: 20px;
}
.imgagrandie:hover, .imglangages:hover {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}
figcaption{
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

h4{
    font-size: 20px;
}

.blochard
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.blochard1, .blochard2
{
    width: 45%;
    margin: auto;
    border: 1px rgba(22,149,163,0.2) solid;
    background: white;
    padding: 10px;
    box-shadow: 3px 3px 2px black;
    color: white;
    position: relative;
    border-radius: 0% 0% 0% 0% / 0% 0% 0% 0% ;
    color: black;
    box-shadow: 10px 10px gray;
    transition: all .4s ease;
}
.blochard1:hover, .blochard2:hover {
    border-radius: 0% 0% 50% 50% / 0% 0% 5% 5% ;
    box-shadow: 10px 10px rgba(0,0,0,.25);
}
.imgskills
{
    float: left;
    margin: 10px 20px 10px 0;
    border: 3px rgb(244,177,131) solid;
    border-radius: 90px;
    padding: 10px;
  
}
.imgskills:hover
{
    background: rgb(244,177,131);
}
.stopflottant
{
    clear: both;
}

/* suite skills */ 

#skills2{
    width: 100%;
    margin: auto;
    background-color: rgba(0,0,0,0.7);
    color: white;
    padding-bottom: 10px;
}
.skills2{
    width: 60%;
    margin: auto;
    padding: 10px 0 40px 0;
}

.cadreskills2{
    background-color: rgba(40,40,40);
    box-shadow: 3px 3px 2px black;
    padding: 20px;
}
.cadreskills{
    background-color: rgb(255,255,255);
    box-shadow: 3px 3px 2px gray;
    padding: 20px;
}

/* CONTACT */

#contact{
    width: 100%;
    margin: auto;
    background-color: rgba(212,212,212,0.8);
}
.contact{
    width: 60%;
    margin: auto;
    padding: 10px 10px 40px 10px;  ;
}

.coordonnees{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: rgb(255,255,255);
    box-shadow: 3px 3px 2px gray;
    padding: 20px;
    text-align: center;
}
.logosimg{
    padding-right: 10px;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.imgagrandie{
    padding-bottom: 20px;
}
.imgagrandie:hover, .logosimg:hover {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    }

/* RESPONSIVE */

@media all and (max-width: 1024px){
    /* formation */
    .formation{
        width: 90%;
        margin: auto;
        padding: 10px 0 30px 0;
    }
    .modules{
        width: 90%;
        margin: auto;
        padding: 10px;
    }

    .boutonsdocs{
        display: flex;
        flex-direction: column;
    }

    .triexperiences
    {
        flex-direction: column;
    }

    .bloc4, .bloc5
    {
        width: 100%;
        margin-top: 20px;
        padding: 10px;
        font-size: 12px;
    }

    .bloc4{
        border-right: none;
    }

    .experiencepro, .experiencepro2
    {
        border-bottom: none;
    }

    .logosentreprises
    {
        margin-bottom: 10px;
    }
    .experience, .experience2, .experience3{
        width: 90%;
    }

    /* SKILLS */

    h4{
        font-size: 14px;
    }
    .langages{
        flex-direction: column;
    }
    .imglangages{
        display: block;
        margin: auto;
    }
    .skills{
        width: 90%;
    }
    .blochard{
        flex-direction: column;
    }
    .blochard1, .blochard2{
        width: 90%;
        margin-bottom: 15px;
    }
    .skills2{
        width: 90%;
        margin: auto;
        padding: 10px 0 40px 0;
    }
    .coordonnees{
        flex-direction: column;
    }
}