*,
*::after,
*::before{
    margin:0;
    padding: 0;
    box-sizing: border-box;
    text-decoration:none;
    list-style:none;
    outline: none;
    user-select: none;
    line-height:normal;
}


html{
    // font-size:10px;
    height: auto;
    width: 100%;

    & body {
        
        position:relative;
        height: auto;
        width: 100%;
        // font-family: 'Poppins', 'Lato', sans-serif;
        // font-weight:400;
        // color:#777;
        // background: rgba(66, 87, 191, 0.1) ;

        // &.bg-line-login {
        //     background-image: linear-gradient(rgba(68, 66, 191, 0.05), rgba(191, 70, 66, 0.1)), url("../images/bg-line.svg") !important;
        //     background-clip: cover !important;
        // }

        // &.bg-line-home {
        //     background-image: url("../images/bg-line-zoom-2.svg") !important;
        //     background-clip: cover !important;
        // }

        & main{
            position: relative;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;

            &.show{
                position: fixed;
            }
        }
    }
}





input,
textarea,
select,
button{
    font-family: "Lato", sans-serif;
}

a,
a:link,
a:visited,
a:active{
    color:#777;
    // font-size:1.6rem;
}

.menu-box-header{
    height:5.7rem;
}

::after,
::before{
    // font-family: FontAwesome;
}


// .popup-personal{
//     overflow: auto;
//     position:absolute;
//     width: 22rem;
//     max-height:40rem;
//     background:#fff;
//     box-shadow:0 0 2rem 0 rgba(0, 0, 0, 0.1);
//     border-radius: 1rem;
//     z-index: -1;
//     visibility: hidden;
//     transform: translateY(3rem);
//     transition-duration: .2s;
//     transition-property:transform visibility;
//     transition-timing-function: ease-in;
// }


 /* #particles-js4, */
/* #particles-js3, */
#particles-js2,
#particles-js {
    width: 100%;
    height: 100%;
    /* background-color: #b61924; */
    background-image: url('');
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position: fixed;
    z-index: -1;
}


//--flex container section--
.flex-container{

    display: flex;


    //alignement en ligne
    &.--row{
        flex-direction: row;

        &.--align-center{
            align-items: center;
        }

        &.--align-stretch{
            align-items:stretch;
        }

        &.--align-start{
            align-items: flex-start;
        }


        &.--align-end{
            align-items: flex-end;
        }

        &.--align-end{
            align-items: flex-normal;
        }

        &.--justify-start{
            justify-content: flex-start;
        }

        &.--justify-end{
            justify-content: flex-end;
        }

        &.--justify-center{
            justify-content:center;
        }

        &.--justify-around{
            justify-content:space-around;
        }

        &.--justify-evenly{
            justify-content:space-evenly;
        }

        &.--justify-between{
            justify-content:space-between;
        }

        &.--justify-normal{
            justify-content:normal;
        }



        &.--content-center{
            align-content: center;
        }

        &.--content-start{
            align-content: flex-start;
        }



        &.--content-end{
            align-content: flex-end;
        }

        &.--content-stretch{
            align-content: stretch;
        }

        &.--content-normal{
            align-content: normal;
        }

        &.--wrap{
            flex-wrap: wrap;
        }

        &.--nowrap{
            flex-wrap: nowrap;
        }
    }

    // alignement en colonne
    &.--column{
        flex-direction: column;

        &.--align-center{
            align-items: center;
        }

        &.--align-stretch{
            align-items: stretch;
        }

        &.--align-start{
            align-items: flex-start;
        }


        &.--align-end{
            align-items: flex-end;
        }

        &.--align-end{
            align-items: flex-normal;
        }

        &.--justify-start{
            justify-content: flex-start;
        }

        &.--justify-end{
            justify-content: flex-end;
        }

        &.--justify-center{
            justify-content:center;
        }

        &.--justify-around{
            justify-content:space-around;
        }

        &.--justify-evenly{
            justify-content:space-evenly;
        }

        &.--justify-between{
            justify-content:space-between;
        }

        &.--justify-normal{
            justify-content:normal;
        }



        &.--content-center{
            align-content: center;
        }

        &.--content-start{
            align-content: flex-start;
        }

        &.--content-end{
            align-content: flex-end;
        }

        &.--content-stretch{
            align-content: stretch;
        }

        &.--content-normal{
            align-content: normal;
        }
    }


    //la marge interne de 10px tous les cote
    & .--padding-both-10{
        padding: 1rem;
    }
    //la margin ixterne de 20px tous les cote
    & .--padding-both-20{
        padding: 2rem;
    }
    //la margin ixterne de 20px à droit
    & .--padding-right-20{
        padding-right: 2rem;
    }
    //la margin ixterne de 10px à droit
    & .--padding-right-10{
        padding-right: 1rem;
    }
    //la margin ixterne de 20px à droit
    & .--padding-top-20{
        padding-top: 2rem;
    }
    //la margin ixterne de 10px à droit
    & .--padding-top-10{
        padding-top: 1rem;
    }
    //la margin ixterne de 20px à droit
    & .--padding-left-20{
        padding-left: 2rem;
    }
    //la margin ixterne de 10px à droit
    & .--padding-left-10{
        padding-left: 1rem;
    }
    //la margin ixterne de 20px à droit
    & .--padding-bottom-20{
        padding-bottom: 2rem;
    }
    //la margin ixterne de 10px à droit
    & .--padding-bottom-10{
        padding-bottom: 1rem;
    }


    //la margin externe de 10px à gauche
    & .--margin-both-10{
        margin:1rem;
    }
    //la margin externe de 10px à gauche
    & .--margin-both-20{
        margin:2rem;
    }
    //la margin externe de 10px à gauche
    & .--margin-left-10{
        margin-left:1rem;
    }
    //la margin externe de 10px à gauche
    & .--margin-left-20{
        margin-left:2rem;
    }
     //la margin externe de 10px à droit
     & .--margin-right-10{
        margin-right:1rem;
    }
    //la margin externe de 20px à droit
    & .--margin-right-20{
        margin-right:2rem;
    }
    //la margin externe de 10px à droit
    & .--margin-top-10{
        margin-top:1rem;
    }
    //la margin externe de 20px à droit
    & .--margin-top-20{
        margin-top:2rem;
    }
    //la margin externe de 10px à droit
    & .--margin-bottom-10{
        margin-bottom:1rem;
    }
    //la margin externe de 20px à droit
    & .--margin-bottom-20{
        margin-bottom:2rem;
    }

    /*--------- redimensionnement des colonnes -------------*/
    //colonne de 10 %
    & > .flex-col-5{
        flex:5%
    }

    //colonne de 10 %
    & > .flex-col-10{
        flex:10%
    }

    //colonne de 15 %
    & > .flex-col-15{
        flex:15%
    }

    //colonne de 20 %
    & > .flex-col-20{
        flex:20%
    }
    //colonne de 25 %
    & > .flex-col-25{
        flex:25%
    }
    //colonne de 30 %
    & > .flex-col-30{
        flex:30%
    }
    //colonne de 40 %
    & > .flex-col-40{
        flex:40%
    }
    //colonne de 50 %
    & > .flex-col-50{
        flex:50%
    }
    //colonne de 60 %
    & > .flex-col-60{
        flex:60%
    }
    //colonne de 70 %
    & > .flex-col-70{
        flex:70%
    }
     //colonne de 75 %
     & > .flex-col-75{
        flex:75%
    }
    //colonne de 80 %
    & > .flex-col-80{
        flex:80%
    }
    //colonne de 90 %
    & > .flex-col-90{
        flex:90%
    }
     //colonne de 95 %
     & > .flex-col-95{
        flex:95%
    }
    //colonne de 100 %
    & > .flex-col-100{
        flex:100%
    }

    & > .self-center{
        align-self: center;
    }
}

//input


.--hide{
    display:none;
}