* {
    font-family: 'Karma', serif;
    box-sizing: border-box;
    border-collapse: collapse;
}
/* Ligne Nav qui suit en scrollant*/

@media screen and (min-width:1026px){
    
nav 
{ position:fixed;

    width:100%;
    top:0;

}
nav.fixed {
    top:0px;
    z-index: 20;
}
nav a {text-decoration:none;
   } 
 }
   
/* menu */
body{
  background: #ffffff;
    z-index: 0;
}


.burger{
  display: none;
}

.menu{
  display: flex;
  justify-content: flex-end;
  font-family: 'Quicksand', sans-serif;
    background-color: #af9bca;
    /* box-shadow: rgba(0, 0, 0, 0.34) 6px 5px 19px 3px; */
    /* border: 1px solid rgb(134, 65, 223); */
    opacity: 0.95;
}

.menu a{
  color: #081317;
  font-size: 2rem;
  text-decoration: none;
  padding: 15px;
  /* transition: .3s all ease-in-out; */
    
}

.menu a:hover{
  color: #deb3d4;
}

@media screen and (max-width:1024px){
  header{
    height: 20%;
      background-color: #af9bca;
  }

  .menu{
     position: fixed; 
    width: 100%;
    height: 80%;
    top:-200vw;
    background: #af9bca;
    flex-direction: column;
    justify-content: center;
    align-items: center;
     transition: .3s all ease-in-out; 
  }
   .menu.active{
    top: 0;
    height: 80%;
      z-index: 5;
  } 

  .menu.top{
    top: 100vw;
  }

  .burger{
    width: 40px;
    height: 40px;
    border: 2px solid #000000;
    border-radius: 5px;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: .5s all cubic-bezier(0.65, -0.43, 0.41, 1.53);
  }
  .burger span{
    width: 70%;
    height: 3px;
    margin: 2px 0;
    border-radius: 3px;
    background: #1e1e1e;
    transition: 0.3s all ease-in-out;
  }
  .burger.active{
    border-color: #EEEEEE;
    transform: rotate(180deg);
      z-index: 6;
  }
  .burger.active span{
    background: #EEEEEE;
  }
  .burger.active span:nth-of-type(1){
    width: 30%;
    background: #EEEEEE;
  }
  .burger.active span:nth-of-type(2){
    width: 60%;
  }
  .burger.active span:nth-of-type(3){
    width: 10%;
  }
}
/* PARALLAX */
.parallax-window para-img1 {
/*
    width: 1000px;
    height: 1000px;
*/
}

/*FIN MENU */
/* insertion icônes */
#phone {
    width: 40px;
    height: 40px;
}
#mail {
    width: 40px;
    height: 40px;
}
#adresse {
    width: 40px;
    height: 40px;
}
#linkedin {
    width: 40px;
    height: 40px;
}
#linkedint, #githubt {
    color: black;
}
#linkedint:hover, #githubt:hover {
    color: black;
    text-decoration: none;
}
#Github {
    width: 40px;
    height: 40px;
}
#linkedin:hover {
    border: dotted 1px blueviolet;
}
#Github:hover {
    border: dotted 1px blueviolet;
}
/* fin insertion icônes*/
#photo, #about {
    padding-top: 100px;
}
#blocphoto {
/*    margin-top: 10px; ajout d'une marge blanche */
}
#blocphototexte {
    margin-bottom: 40px;
margin-top: 40px;
}
#about h2 {
    padding: 10px;
}
.img-rounded {
/*    margin-bottom: 10px;*/
    width: 210px;
    height: 210px;
    margin-top: 40px;
/*    color: rgba(181, 137, 204);*/
}
/* disposition blocs*/

.bleu {
    color: #0f0fb2;
}

.violet {
    color: #6c4cef;
    font-weight: bold;
}
#bloc { 
    background-color: #af9bca;
/*        background-color: rgba(181, 137, 204);*/
    margin-bottom: 10px;
/*    height: 400px;*/
    overflow: hidden;
}
.contrainer-fluid > h2 {
    text-align: center;
}

.contrainer-fluid  {
    padding: 10px;
}

#skillst { text-align: left;
   
    
}


#bloc2 > p {
    width: 400px;
    height: 400px;
    text-align: justify;
    justify-content: center;
}
#FORMATIONS, #EXPERIENCES {
    margin-top: 120px;
    padding: 15px;
    display: flex;
    justify-content: center;
    flex-direction: column;
border: 2px dotted #deb3d4;
    border-radius: 8px 8px;
}
#FORMATIONS > p {
    text-align: justify;
    font-size: 14px;
}
#EXPERIENCES > p {
    text-align: justify;
    font-size: 14px;
}
#FORMATIONS > h2 {
    display: flex;
    justify-content: center;
   padding: 5px;
}
#EXPERIENCES > h2 {
    display: flex;
    justify-content: center;
    padding: 5px;
}
#bloccv {
    display: flex;
    justify-content: center;
    flex-direction: row;
}
#CV, #CV2 {
    width: 60px;
    height: 43px;
    text-align: center;
    background-color: #deb3d4 !important;
    border-radius: 7px;
    margin: 5px;
    font-weight: bold;
    color: white;
}

/* #d1, #d2, #d3, #d4 {
display: none; } */

a#plus, a#plus2, a#plus3, a#plus4 {
background-color: #deb3d4 !important;
    width: 20px;
    height: 23px;
text-align: center;
    border-radius: 7px;
    margin: 5px;
    font-weight: bold;
    color: white;
}
a#plus:hover, a#plus2:hover, a#plus3:hover, a#plus4:hover {
text-align: center;
        background-color: #af9bca !important;
        border-radius: 7px;
        color: white;
        transform: scale(1.07);
        transition: transform .5s ease;
        font-weight: bold;
}
    #CV:hover, #CV2:hover {
        width: 60px;
        height: 43px;
        text-align: center;
        background-color: #af9bca !important;
        border-radius: 7px;
        color: white;
        transform: scale(1.07);
        transition: transform .5s ease;
        font-weight: bold;
    }

 .cv {margin-top: 14px;
text-decoration: none;
     
}
a:link {
text-decoration: none;}
#bloc3, #bloc4 {

    display: flex;
    justify-content: center;
/*    padding: 49px;*/

}
/*
#earth { 
    padding: 40px;

}
*/
#earth {
/*    height: 1000px;*/
/*    background-image: url(assets/earth3.png);*/
/*    background-size:contain;*/
/*
    background-repeat: no-repeat;
    background-size: 900px;
    background-position: center;
*/
/*    margin-left: 20px;*/
}
/* blocs encadrés */
#pointsforts h5 {
    text-align: center;
}


#bloc2 {
background-color: #af9bca;
    display: flex;
    justify-content: space-between;
}



#bloc3{
    margin-top: 10px;
}

#skills, #langues { 
/*    height: 320.4px;*/
}

#pointsforts, #skills, #langues {
box-sizing: border-box;
    width: 325px; 
/*height: 320.4px;*/
/*    height: 300px; en retirant: le bloc prend la taille du texte */
/*     Parent is a Flex container so it will squeeze it */
    margin: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    border: 1px solid #c8c8c8;
    box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.75);
    overflow: hidden;
    line-height: 21px;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
    #pointsforts:hover, #skills:hover, #langues:hover {
        transform: scale(1.07);
        transition: transform .5s ease;
    }
#FORMATIONS, #EXPERIENCES {
box-sizing: border-box;
    width: 500px; 

/*    height: 300px; en retirant: le bloc prend la taille du texte */
/*     Parent is a Flex container so it will squeeze it */

    margin: 10px;
    overflow: hidden;
    line-height: 21px;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;

} 

#FORMATIONS > h2, #EXPERIENCES > h2 {
/*    color: #bb6a9f;*/
    color: #bc91ad;

    
}
#FORMATIONS > p, #EXPERIENCES > p {
 font-family: 'Karma', serif;
  font-size: 15px;
color: #8585ad;
}

#lignedouble {
    
    width: 30%;
   height: auto; 
}
.titre {
    margin-top:6px;
}
.deco {
    margin-top: 3px;
}

/* style paragraphes points forts et skills */
#pointsforts, #skills > p {
    text-align: left;
    text-align: justify;
}
/* progress bar */

#progressBar {
    text-align: left;
}
#Langues {

    display: flex;
    flex-direction: column;
    align-content: center;
}
.anglais, .neerlandais, .français, .espagnol {
    margin: 10px;
}
/* Section portfolio ------------------------ */
/*
#portfolio > a {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
*/

#portfolio {

    display: flex;
    flex-direction: column; 
    justify-content: center;

    background-color: #af9bca;
    overflow: hidden;
}
#portfolio > h2 {
    text-align: center;
    margin: 0px;
    padding: 20px;
    }
#button {
    display:flex;
    flex-direction: row;
    margin-top: 10px;
/*    margin-left: 5px;*/
    margin-bottom: 10px;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
    
    #portfolio > p{
    margin-right: 40px;
    }

#portfolio button {
    width: 80px;
    margin: 5px;
    margin-bottom: 30px;
    border: 2px solid white;
    background-color: white;
    color: #af9bca;
    font-weight: bold;
    /* pas nécessaire car bootstrap!
    margin-right: 40px;
    margin-bottom: 30px;
    padding: 15px;
    width: 200px;
*/
}
    #portfolio button:hover {
        background-color: #af9bca !important;
        border-radius: 7px;
        color: white;
    transform: scale(1.07);
    transition: transform .5s ease;
        border: 2px solid white;
        font-weight: bold;
    }

#gallery  {

    display: flex;
/*    flex-direction: column;*/
   flex-wrap: wrap;

/*   padding: 20px;*/
/*
    padding: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
*/
   justify-content: center;
}
.container-fluid, .col-xs-12, #gallery {
    padding: 0;
    margin: 0;
}


.imageportfolio {
    /*     padding: 10px;*/
   /*  margin-bottom: 10px;*/
    /*    margin-right: 10px;*/

    border: 2px solid grey;
    height: 325px;
    width: 450px;
}

#logorelax {
    background-color: white;
}


.hidden{
  display: none;
}

.project {
    width: 450px;
    height: 325px;
    /*     ajout texte sur image*/
    position: relative;
    text-align: justify;
    color: #000000;
    /*    background: rgba(255, 255, 255, 0.35); */
    background: white;

}


.project > p {
    text-align: center;
    text-align: justify;
}
.project {
    display: inline-block;
    /* margin: 5px*/
    margin: 10px;
}
.projett {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    width: 400px;
    
}
.project:hover .imageportfolio {
    opacity: 0.4;
    transform: scale(1.015);
    transition: transform .5s ease;
}
.project:hover .projett {
    opacity: 1;

}
.glyphicon.glyphicon-fullscreen, .glyphicon.glyphicon-link, .glyphicon.glyphicon-eye-open {
    font-size: 25px;
    padding: 10px;
    border: 1px dotted transparent;
}
.glyphicon.glyphicon-fullscreen:hover, .glyphicon.glyphicon-link:hover, .glyphicon.glyphicon-eye-open:hover {
    border: 1px dotted purple;
    
}
/* ------- FOOTER ------*/

#contact {
    height: 525px;
    background-color: transparent;
}

#contact > h2 {
    display: flex;
    justify-content: center;
    padding: 13px;
}

footer {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #af9bca;
    height: 75px;
    overflow: hidden;
    
}
#boutonformulaire {
    display: flex;
    justify-content: center;
}
form > p {
    text-align: center;
    height: 50px;
} 
form input, textarea {
    opacity: 0.6;
}
footer  h3 {

    text-align: center;
    margin-top: 5px;

}
input {
    margin-bottom: 5px;
}
/*
form {
    margin-bottom: 5px;
}
*/
#button {
    margin-bottom: 5px;
}
.btn.btn-primary.btn-block {
    margin-bottom: 5px;
    width: 100px;
}
    .btn.btn-primary.btn-block:hover {
        transform: scale(1.07);
        transition: transform .5s ease;
    }
/* media query */

/*
@media screen and (max-width:275px) {
    #pointsforts, #skills, #langues {
        width: 250px; }
    }
*/
 .glyphicon.glyphicon-arrow-up {
    font-size: 25px;
    padding: 10px;
/*
     border: 1px dotted transparent;
    text-align: right;
*/
}
.glyphicon.glyphicon-arrow-up:hover {
    color: #2424a0;
}
@media screen and (max-width:475px) {
    .deco, #lignedouble {
            display: none;
        } 
#FORMATIONS > p, #EXPERIENCES > p {
 font-family: 'Karma', serif;
  font-size: 15px;
color: #8585ad;
}
       }
    
    @media screen and (max-width:780px) {
    #bloc {
/*height: 800px;*/
    }
    #espace {
    display: flex;
    flex-direction: column;
}
    #pointsforts, #skills, #langues {
    width: 275px; 
/*    height: 300px; en retirant: le bloc prend la taille du texte */
/*     Parent is a Flex container so it will squeeze it */
    
}
        #portfolio button {
            width: 60px;
            border: 2px solid white;
        }
        #portfolio h2 > a{
            display: none;
        }
        footer h3 > a {
            display: none;
        }
        .imageportfolio, .project, .projett {
            width: 325px;
            height: 250px;
            overflow: hidden;
         }   
        }
    @media screen and (max-width:324px){
        #portfolio button {
            width: 47px;
            margin: 2px;
        }
/*
}@media screen and (max-width:1018px) {
    #bloc {
height: 800px;
    }
    #espace {
    display: flex;
    flex-direction: column;
}
}
*/

/*
@media screen and (max-width: 395px) {
    #earth{
        height: 1300px;
    }
*/
*/