*{
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
    /* font-size: large; */
    /* font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; */
    font-family: "Open Sans",sans-serif;
    letter-spacing: 3px;
}
/* globale */
header{
    margin-top: 6vh;}
main {
    margin: 1rem;
}  
h4{
    font-size: 2em;
}
body{
    /* background-color:#3A506B ; */
    background-color: #26262e;
    color: #BFBFBF;
}

.main-acceil{
    display: flex;
    flex-flow: column wrap;
}
.icone{
    width: 50px;
    height: 50px;
    margin-top: 5px;
}
/*Carousel*/
.animated{
  animation-name: name;
  animation-duration: 2s;
  animation-duration: both;
}
#carousel{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 17vh;
}
h1{
    animation-duration: 10s; 
    animation-name: effect;
}
.name_hover{
    font-size:2em;
    margin: 5px;
    transition: all .3s ease-out;
}
/* .name_hover:hover{
  color: #30878C;
} */
/*potfolio*/

.main-portfolio{
    display: grid;
    grid-template-columns: repeat(1,1fr);
    margin: auto;
}
figure{
    width: 80vw;
    height: 25vh;
    cursor: pointer;
    border: 2px outset  #7a7a7a;
    box-shadow: rgb(0, 0, 0) 7px 10px 14px;
    border-radius: 10px 15px;
    margin: auto;
}
.bande{
    height:15%; 
    background-color:#FCFCFC ;
    color:black ;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: large;
    border-top:2px outset  #7a7a7a ;
    border-top-left-radius: 10px ;
    border-top-right-radius:15px ;
}
.main-figure{
    height: 85%;
    background-image:url(./img/37631.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-bottom: 2px outset  #7a7a7a;
    box-shadow: rgb(0, 0, 0) 5px 8px 12px;
    border-bottom-left-radius: 10px ;
    border-bottom-right-radius:15px ;
}
.main-figure>a{
    display: block;
    width:100% ;
    height: 100%;
    position: relative;
}
/* Retour portfolio*/
.retour-portfolio {
    display: flex;
    flex-wrap: wrap;
    width: 52px;
    height: 55px;
    position: absolute;
    left: 5vw;
    top:calc(10vh /2);
    transform: translateY(-11px) translateX(-11px);
}
.retour-portfolio > div {
    width: 8px;
    height: 8px;
    margin: 4px;
    background-color: #7a7a7a;
    transition: transform 1.5s ease-out;
}
/* .retour-portfolio :nth-child(2){
    background-color: #30878C;
}
.retour-portfolio :nth-child(3){
    background-color: #30878C;
}
.retour-portfolio :nth-child(4){
    background-color: #30878C;
}
.retour-portfolio :nth-child(8){
    background-color: #30878C;
}
.retour-portfolio :nth-child(9){
    background-color: #30878C;
} */
/* .fleche-retour-portfolio{
    display: flex;
    flex-wrap:wrap ;
    width: 52px;
    height: 55px;
    position: absolute;
    left: 5vw;
    top:calc(10% - (55px / 2));
} */
/* .fleche-retour-portfolio>div{
} */
/* .fleche-retour-portfolio span{
    display: flex;
    width: 8px;
    height: 8px;
    margin: 4px;
    background-color: #7a7a7a;
}
.corps{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tete{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.queue{
    display: flex;
    flex-direction: column;
    justify-content: center;
} */
/* selection */
#selection{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}
#selection div{
    margin: 0.3rem;
    padding: 0.3rem;
    border: 2px solid  black;
    cursor: pointer;
    color: black;
    background-color: #FCFCFC;
}
/* contenu */
#contenu {
    width: 100%;
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
}
#contenu> div > p{
    /* text-align: center; */
   width: 100%;
   text-align: center;
}
#contenu> div > h5{
    /* text-align: center; */
   width: 100%;
   text-align: center;
   background-color:#BDBDD1 ;
   color: black;
   border-bottom-left-radius: 10px ;
   border-bottom-right-radius:15px ;
   font-size: large;

}
/* Menu hamburgeur */
.burger{
    width:42px;
    height: 24px;
    cursor: pointer;
    position: relative;
    margin: 1rem;
}
.burger span{
    display: block;
    width: 42px;
    height: 4px;
    margin-top: 4px;
    background-color: #BDBDD1;
    position: absolute;
    left: 91vw;
    top:-6vw;
    transform: translateY(-50%);
    transition: background-color 0.5s ease-in-out;
}
.burger span::before, .burger span::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 4px;
    background-color:#BDBDD1;
    transition: transform 0.5s ease-in-out;
    transition: background-color 0.2s ease-in-out;
}
.burger span::before{
    transform: translateY(-10px);

}
.burger span::after{
    transform: translateY(+10px);
}
.choix{
    width: 100vw;
    position: absolute;
    background-color:#FCFCFC; 
    border-radius: 10px 15px;
   
    color : black;
}
.choix ul{
    list-style: none;
    height: 50vh;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
}
.choix a {
    text-decoration: none;
    text-align: left;
    color : black;
}
.burger.active span {
    background-color: transparent;
}
.burger.active span::before{
    transform: translateX(0px) rotate(45deg) translateY(5px);
    background-color: #A63D40;

}
.burger.active span::after{
    transform: translateX(0px) rotate(-45deg) translateY(-5px);
    background-color: #A63D40;
}
/*.choix li:hover{
    background-color:  #AA1AC8;
}*/
.nav{
    left: 100vw;
    transition-duration: 0.5s ;

    /* background-color: #3A506B; */
}
.menu{
    position: fixed;
    z-index: 7;
}
.nav_open{
    position: fixed;
    text-align: center;
    top: 0vh;
    left: 0;
    width: 80vw;
    height: 100vh;
    transition: left 0.5s cubic-bezier(0.54, 0.805, 0.14, 1.005);
}
/* footer*/
#piedBlog{
    margin-top: 7em;
    margin-right: 7em;
    margin-left: 7em;
    display: flex;
    justify-content: space-around;
    border-top: 1px solid  #BFBFBF ;
    justify-items: center;
    font-size:0.8em;

}

#piedBlog>:last-child{
    width: 10%;
    display: flex;
    justify-content: space-evenly;
    margin: 3em;
}
#piedBlog>:first-child{
    width: 50%;
    display: flex;
    justify-content: start;
    margin: 3em;
}
#piedBlog a{
    width: 50px;
    height:50px;
    border-radius: 10px;
    background-color: aliceblue;
    justify-content: space-around;
}
.img_mini{
    width: 50px;
    height: auto;
}
@media only screen and (min-width: 480px) { 
    
}
@media screen and (min-width:1024px){
/*globale*/
.main-acceil{
    display: grid;
}
.main-portfolio{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    width: 70vw;
    margin: auto;
    justify-self: center;
    }
.main-portfolio>:nth-child(2n+1){
    animation-duration: 3s;
    animation-name: folioout;
    
}
.main-portfolio>:nth-child(2n){
    animation-duration: 3s;
    animation-name: folioin;
}
figure{
    width: 100%;
    height: 45vh;
}
   
/*menu ordinateur*/
.burger{
    width:64px;
    height: 50px;
}
.burger span{
    position: absolute;
    display: block;
    width: 100%;
    height: 8px;
    top: calc(10vh / 3);
    margin: 4px;
}
.burger span::before, .burger span::after{
    height: 8px;}
.menu{
    top : 0;
    position: sticky;
    z-index: 7;
    overflow: hidden;
}
.choix{
    position: absolute;
    top: 0vh;
    height: 10vh;
    width: 80vw;
    border-radius: 5px;
}
.nav{
    top:0;
    left: 120vw;
    transition: left 0.5s cubic-bezier(0.54, 0.805, 0.14, 1.005);
    /* padding-bottom: 10vh; */
}
.nav_open{
    max-height: 100%;
    top:0;
    left: 10vw;
    transition: left 0.5s cubic-bezier(0.54, 0.805, 0.14, 1.005);
    /* width: 80vw;
    height: 10vh; */
}
.choix a {
    text-decoration: none;
    justify-content : center;
}
.choix ul{
    flex-flow: row nowrap;
    align-items: center;
    height: 10vh;
    width: 80vw;
}
/* selection*/
#selection{
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
}
#selection div{
    width: 70%;
    margin: 2rem;
    padding: 2.5rem 2rem;
    border: 2px outset  #30878C;
    box-shadow: rgb(0, 0, 0) 5px 8px 12px;
    /* border-radius: 50% 20% / 10% 40%; */
    border-radius: 10px 15px;
    text-align: center;
}
/*contenu*/
#contenu {
    width: 100%;
    /* animation-duration: 3s;
    animation-name: slidein; */
}
#contenu>div{
    /* text-align: center; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    animation-duration: 3s;
    animation-name: slidein;
}
#contenu>div>p{
    animation-duration: 3s;
    animation-name: slidein_Hidden;
}

/*carouse*/

@keyframes effect {
    from {
        opacity: 0.3;
    }
    to {
        opacity: 1;
    }
    }
@keyframes slidein_Hidden {


    from {
        margin-left: 100%;
        width: 300%;
        display: none;
    }
    to {
        margin-left: 0%;
        width: 100%;
        display: none;
    }
    }

@keyframes slidein {


    from {
        margin-left: 100%;
        width: 300%;
    
    }
    to {
        margin-left: 0%;
        width: 100%;
    }
}
@keyframes name {
    from {
        opacity: 0.3;
        -webkit-animation-timing-function: ease-out;
        }
        to {
            opacity: 1;
        -webkit-animation-timing-function: ease-in;
        }
    }

@keyframes folioin {


    from {
        margin-left: 100%;
   
    
    }
    to {
        margin-left: 0%;
     
    }
}
@keyframes folioout {


    from {
        margin-left: -100%;
    
    }
    to {
        margin-left: 0%;
       
    }
}

}