@charset "UTF-8";



body {
    margin: 0 !important;
    padding: 0 !important;

}

html {
    scroll-behavior: smooth;
    font-family: 'DotGothic16',
        sans-serif !;

}


.container {
    max-width: 65% !important;

}



/*  */


/* MENU HORIZONTAL*/


.Ligne_ul {
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    display: flex;
    color: white;

}

.Ligne_ul .ligne_menu .MenuHori {
    list-style: none;
    color: white !important;
    text-decoration: none !important;
}

.Ligne_ul .ligne_menu {
    text-decoration: none !important;
}

.Ligne_ul .ligne_menu :hover {
    color: #ffae00;
}

.Ligne_ul .ligne_menu {
    position: relative;
    left: auto;
    display: block;
    padding: 10px 20px;
    margin: 20px 0;
    text-decoration: none;
    text-transform: uppercase;
    color: #ffffff !important;
    font-weight: bold;
    transition: .3s;
    font-display: initial;
    text-decoration: none !important;

}

.Ligne_ul .ligne_menu :before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-top: 3px solid rgb(207, 207, 207);
    border-bottom: 3px solid#ffae00;
    transform: scaleY(2);
    opacity: 0;
    transition: .3s;
    text-decoration: none !important;
}

.Ligne_ul .ligne_menu :hover::before {
    transform: scaleY(1);
    opacity: 1;
    text-decoration: none !important;
}


/* navbar change color */


.menu {
    background: rgba(6, 6, 12, 0.247) !important;
    transition: 200ms ease;
    height: 120px !important;
    position: fixed relative;

}


.menu.scrolled {
    background: rgba(30, 30, 37, 0.973) !important;
    position: fixed !important;
    height: 70px !important;
}



/* End navbar change color */


.brand-img {
    margin: 0%;
}

.navbar-nav {
    font-size: 108%;
    font: bold;
    width: 100%;
    top: 50%;
    left: 55%;
}



/* Menu déroulant */
.navbar-toggler {
    border: 2px coral;
    background: darkblue;
}


/* Menu Responsive */

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(32, 32, 44, 0.808);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.menu_beurger {
    margin-left: 30%;
    margin-top: 15px;
}

.sidenav a {
    padding: 8px 8px 8px 25px;
    text-decoration: none;
    font-size: 25px;
    color: #ffffff;
    display: block;
    transition: 0.3s;
}


.sidenav a:hover {
    color: rgb(245, 189, 37);
    text-decoration: none;

}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
    color: rgb(255, 255, 255);
}

.sidenav .closebtn:hover {
    color: rgb(245, 189, 37);
}

.HauteurLigne {
    width: 350px !important;
    border-left: 0px !important;
}




@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

    .sidenav a {
        font-size: 18px;
    }
}

/*End Menu déroulant */

/* End Menu */

/*Corps de la page */

/*Corps de la page */
section {
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    margin: 0%;
    padding: 0%;
}

.sec0 {}


/*couverture de l'image d'accueil */

.carousel-caption {
    margin-bottom: 25vh;

}

.div_sec0 {
    width: 100%;
    height: 75vh;
    text-align: center;
    background: rgba(46, 34, 34, 0.473);
    font: bold;
    color: rgba(255, 255, 255, 0.973);
    position: absolute;
}

/*couverture de l'image d'accueil */





.btn_sec0 {
    margin: 0%;
    padding-top: 0%;
    height: 60px;
    width: 250px;

}



.sec1 {
    padding: 2%;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.corp_sec1 {
    background: rgb(255, 255, 255);
    height: 95%;
    width: 70%;
    padding: 0%;
    margin-left: 15%;
    font-size: 14px;

}

.brand-img {
    height: 70px;
    width: 70px;
    margin-left: 50%;
}


.div_img {
    width: 0%;
    background: red;
    height: 0%;
    position: fixed;
}




.sec2 {
    padding: 2%;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.829);

}

.sec3 {
    background-image: url(images/b01.jpg);
    background-size: cover;
    background-attachment: fixed;
    box-sizing: border-box;
    width: 100%;

}

.sec4 {
    background-image: url(images/b01.jpg);
    background-size: cover;
    background-attachment: fixed;
    box-sizing: border-box;
    height: 50%;
    width: 100%;

}

.core_competence {
    background-image: url(images/monderond.png);

    height: 100%;
    width: 100%;
}


/* BULLE DE CONVERSATION - DIPLOMES*/

/* Diplôme PC*/

.bubble-text {
    background: #3e3e44;
    color: #fff;
    padding: 7px 15px;
    border-radius: 10px;
    widows: 40vh;
    border: 2px rgb(53, 54, 54);
    box-sizing: border-box;

}


.bubble-text::after {
    content: "";
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #3e3e44;
    position: absolute;
    rotate: 90deg;
    margin-top: -80px;
    margin-left: -40px;
}

.BulleDate {
    background-color: crimson;
    height: 180px;
    width: 180px;
    border-radius: 50%;
    position: absolute;
}

/* Diplôme Mobile*/

.bubble-text-mobil {
    background: #3e3e44;
    color: #fff;
    padding: 7px 15px;
    border-radius: 10px;
    widows: 40vh;

}



.dateDipl {
    border-radius: 50%;
    height: 200px;
    width: 50px;
    margin-right: 110px;
    font-style: normal;

}

.AnneeDiplo {
    text-align: center;
    margin-top: 40%;
    font-weight: bolder;
    font-size: 25px;
}


.AnneeDiploLxLg {
    margin: 70px 65px !important;
    position: absolute !important;
    font-weight: bolder;
    font-size: 25px;
}



/* Diplôme Expérence*/

/* PC md lg lx*/
.bubble-text-Exp {
    background: #3e3e44;
    color: #fff;
    padding: 7px 15px;
    border-radius: 10px;
    widows: 40vh;
    border: 2px rgb(53, 54, 54);
    box-sizing: border-box;

}


.bubble-text-Exp::after {

    content: "";
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #3e3e44;
    position: absolute;
    rotate: 90deg;
    margin-top: -80px;
    margin-left: -40px;
}



/* Mobil sm xs */

.bubble-text-mobil-Exp {
    background: #3e3e44;
    color: #fff;
    padding: 7px 15px;
    border-radius: 10px;
    widows: 40vh;

}

.dateExp {
    border-radius: 50%;
    height: 200px;
    width: 50px;
    margin-right: 110px;
    font-style: normal;
}

.AnneeExp {
    text-align: center;
    margin-top: 40%;
    font-weight: bolder;
    font-size: 25px;
}


.AnneeExpLxLg {
    margin: 70px 65px !important;
    position: absolute !important;
    font-weight: bolder;
    font-size: 25px;
}






/* End corps de la page */


/* Liste strong */
strong {
    font-style: italic;
    color: rgb(121, 115, 115)15)
}

.concate {
    margin-left: 20px;
    color: rgb(126, 126, 126);

}

.concateStrong {
    margin-left: 20px;

}



/* CONTACTS -  */

.formInfoCont {
    border-radius: 0px !important;
    border-color: rgb(126, 124, 124) !important;
    border: 0 !important;
    background-color: rgb(206, 206, 206) !important;
    height: 40px !important;
    width: 40px !important;
}

.formInfoCham {
    border-radius: 0px !important;
    border-left: 0px !important;
    border-right: 0px !important;
    border-color: rgb(206, 206, 206) !important;
    height: 40px !important;
}

.formZoneTex {
    border-radius: 0px !important;
    border-color: rgb(126, 124, 124) !important;
    border: 0 !important;
    background-color: rgb(206, 206, 206) !important;
    height: auto !important;
    width: 35px !important;

    position: ;

}





/* footer */

.div_footer {
    height: 100%;
    width: 100%;
    padding-right: 20%;
    padding-left: 20%;
    background-clip: content-box;
    background: #1e1e24;
    text-align: left;
    font-style: normal;
    font: 14px;
    color: rgb(255, 255, 255);
}

.bas_de_page {
    background: rgb(5, 5, 5);
}


/* End footer  */




/* COMPETENCES */

.menu-competence {
    height: 50px;
    width: 100%;
}

.RealProj {
    color:  !important;
    background-color: blue !important;
}

.RealProj a:hover {
    background: khaki !important;
}




.ReseauxSo {
    position: fixed !important;

    height: 0px !important;
    margin: 5vh !important;
    right: 100%;


}




/* 
.modal-backdrop  {
    margin-left: 255px;
    color: mediumspringgreen;
}
.fade{
} 

.show {

}


.modal {
    
}

.bd-example-modal-lg{
    margin-left: 255px;
    background: mediumvioletred;

}*/