/*///////////////////////////////
///////////// padding & margin
///////////////////////////////*/

.p20-10{
    padding: 10px 20px;
}

.p5{
    padding: 5px;
}

.p8{
    padding: 8px;
}

.p10{
    padding: 10px;
}

.p20{
    padding: 20px;
}

.p40{
    padding: 40px;
}

.p60{
    padding: 60px;
}
.p80{
    padding: 60px;
}

.m2{
    margin: 2px;
}

.m5{
    margin: 5px;
}

.m8{
    margin: 8px;
}

.m10{
    margin: 10px;
}

.m20{
    margin: 20px;
}

.m40{
    margin: 40px;
}

.m60{
    margin: 60px;
}

.m80{
    margin: 80px;
}

.br5{
    border-radius: 5px;
}

.br10{
    border-radius: 10px;
}

.br15{
    border-radius: 15px;
}

.br20{
    border-radius: 20px;
}

.br25{
    border-radius: 25px;
}
.br30{
    border-radius: 30px;
}

.bs{
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
}

.bs3{
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3);
}

.bs1-5{
    box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.1);
}

.bs3-5{
    box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.3);
}

.mAuto{
    margin-left: auto;
    margin-right: auto;
}

.textCenter{
    text-align: center;
}

.bold{
    font-weight: bold;
}

.bgCover{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bgContain{
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.nonSelectionnable
{
    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
    -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
    user-select: none; /* Propriété standard */
}

.blackScreen{
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.7);
    height: 100%;
    width: 100%;

}

.blackGradientScreen{
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(rgba(0, 0, 0, 0) 42%,rgba(0, 0, 0, 0.6) 69%); ;
    height: 100%;
    width: 100%;

}

.greyScreen{
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(44, 44, 44, 0.7);
    height: 100%;
    width: 100%;

}

/*///////////////////////////////
///////////// Flex
///////////////////////////////*/

.flex{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.flexVAlign{
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    align-content: center;
}

.flexHAlign{
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.flexWrap{
    flex-wrap: wrap;
}

.flexCol{
    flex-direction: column;
}

.flexGrid{
    flex-wrap: wrap;
}

.flexCenter{
    align-content: center;
    justify-content: center;
}

.flex1{
    flex: 1;
}

.flex2{
    flex: 1;
}

.flex3{
    flex: 1;
}

.flex4{
    flex: 1;
}
/*///////////////////////////////
///////////// Transitions
///////////////////////////////*/

.transition18{
    -webkit-transition: all 1.8s;
    -moz-transition: all 1.8s;
    -o-transition: all 1.8s;
    transition: all 1.8s;
}

.transition15{
    -webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -o-transition: all 1.5s;
    transition: all 1.5s;
}

.transition9{
    -webkit-transition: all .9s;
    -moz-transition: all .9s;
    -o-transition: all .9s;
    transition: all .9s;
}

.transition7{
    -webkit-transition: all .7s;
    -moz-transition: all .7s;
    -o-transition: all .7s;
    transition: all .7s;
}

.transition6{
    -webkit-transition: all .6s;
    -moz-transition: all .6s;
    -o-transition: all .6s;
    transition: all .6s;
}

.transition5{
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.transition3{
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.transition2{
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;

}