/********************************************* fonts ***************************************/
@font-face{font-family:'proximanova';src:url('fonts/Proxima Nova Thin.otf');}
@font-face{font-family:'mistral';src:url('fonts/MISTRAL.TTF');}
@font-face{font-family:'adobeArabic';src:url('fonts/AdobeArabic-Regular.otf');}
@font-face{font-family:'gidole';src:url('fonts/Gidole-Regular.otf');}
@font-face{font-family:'hellodenver';src:url('fonts/hellodenverdisplayregular_v1.6.ttf');}
@font-face{font-family:'bebas kai';src:url('fonts/BebasKai.ttf');}
@font-face{font-family:'gilroy-bold'; src:url('fonts/Gilroy-ExtraBold.otf');} 
@font-face{font-family:'gilroy'; src:url('fonts/Gilroy-Light.otf') ;} 
@font-face{font-family:'fankids'; src:url('fonts/FanKids.otf')}
@font-face{font-family:'kidoproject'; src:url('fonts/Kido Project.ttf') ;}
@font-face{font-family:'baloo'; src:url('fonts/Baloo-Regular.ttf') ;}
@font-face{font-family:'sweettalk'; src:url('fonts/Sweet Talk.otf');}
@font-face{font-family:'barmeno'; src:url('fonts/BARMENO-ROMAN.ttf') ;}
@font-face{font-family:'kghappy'; src:url('fonts/KGHAPPYSolid.ttf') ;}

/**************************************** font family classes *********************************/
.kghappy{
    font-family:'kghappy';
}
.barmeno{
    font-family:'barmeno';
}
.sweettalk{
    font-family:'sweettalk';
}
.baloo
{
    font-family:'baloo';
}

.kidoproject{
    font-family:'kidoproject';
}
.fankids{
    font-family:'fankids'; 
}

.gilroy-bold{
    font-family:'gilroy-bold';
}

.gilroy{
    font-family:'gilroy';
}

.sansserif{
    font-family: sans-serif;
    }

.proximanova{
    font-family: proximanova;
}
.mistral{
    font-family: mistral;
}

.adobearabic{
    font-family: adobeArabic;
}
.gidole{
    font-family: gidole;
}
.hellodenver{
    font-family: hellodenver;
}
.bebas{
    font-family:bebas kai;
}

/*********************************************** positionnement ************************************/

body{
    background-color:rgb(241, 240, 237); 
    font-family: 'proximanova', serif;
}
.banner, .ok{
    -webkit-background-size:cover;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    height:100vh;
}
.parallax{
    min-height:500px;
    background:transparent;
}
.graphic{
    -webkit-background-size:cover;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    height:40vh;
}

/******************************************* animation ************************************************/

.bw img{
    -webkit-filter:grayscale(100%);
    filter:grayscale(100%);
    transform:scale(1);
    transition:transform 1600ms;
}
.bw img:hover{
    -webkit-filter:grayscale(0%);
    filter:grayscale(0%);
    -webkit-transition:all 0.3s;
    transition:all 0.3s;
    transform:scale(1.1);
}

    /******************************************** colors and backgrounds *********************************/
    .gray{
        color: rgba(0, 0, 0, 0.576) ;
    }
    .hrorangered{
        border-top: 4px solid orangered;
        width: 15%;
    }
    .orangered{color:orangered;}

    /************************************************* links ******************************************/
    
    a:hover{text-decoration:none;}

    .alink{
        color:white;
        text-decoration: none;

    }
    
    .alink:hover{
       color:orangered;
       text-decoration: none;
       
   } 

    /************************************************* text ******************************************/
    .text1{
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 3rem;
    }
    .grandtitre{
        font-size:2.6rem;
    }
        
    .textparalax{
    
        color: #ffffff; 
        padding-top: 170px;
        padding-bottom: 150px;
        text-align:center;
    }
    .neon-text{text-shadow:.1vw 0vw .25vw , .2vw 0vw .25vw #ff5521, .4vw 0vw .25vw #ff5521,
        .1vw 0vw 0vw rgb(250, 127, 83), .2vw 0vw 0vw rgb(250, 127, 83), .4vw 0vw 0vw rgb(250, 127, 83),
        .1vw 0vw .1vw rgb(250, 127, 83), .2vw 0vw .1vw rgb(250, 127, 83), .4vw 0vw .1vw rgb(250, 127, 83),
        .1vw 0vw 2vw rgb(250, 127, 83), .2vw 0vw 2vw rgb(250, 127, 83), .4vw 0vw 2vw rgb(250, 127, 83),
        .1vw 0vw 1vw rgb(250, 127, 83), .2vw 0vw 1vw orangered, .4vw 0vw 5vw orangered,
        .1vw 0vw 5vw orangered, .2vw 0vw 20vw orangered, .4vw 0vw 10vw orangered,
        .1vw 0vw 10vw orangered, .2vw 0vw 30vw orangered, .4vw 0vw 10vw orangered;}
        .neon-title{text-shadow:.1vw 0vw .25vw , .2vw 0vw .25vw rgb(87, 25, 0), .4vw 0vw .25vw rgb(0, 0, 0),
        .1vw 0vw 0vw rgb(56, 56, 56), .2vw 0vw 0vw rgb(56, 56, 56), .4vw 0vw 0vw rgb(56, 56, 56),
        .1vw 0vw .1vw rgb(56, 56, 56), .2vw 0vw .1vw rgb(56, 56, 56), .4vw 0vw .1vw rgb(56, 56, 56),
        .1vw 0vw 2vw rgb(56, 56, 56), .2vw 0vw 2vw rgb(56, 56, 56), .4vw 0vw 2vw rgb(56, 56, 56),
        .1vw 0vw 1vw rgb(56, 56, 56), .2vw 0vw 1vw black, .4vw 0vw 5vw black,
        .1vw 0vw 5vw black, .2vw 0vw 20vw black, .4vw 0vw 10vw black,
        .1vw 0vw 10vw black, .2vw 0vw 30vw black, .4vw 0vw 10vw black;}
        .neon-wrapper{box-shadow:0 0 0.4vw 0.6vw rgb(250, 127, 83),
        0 0 4vw 0.4vw orangered,
        inset 0 0 1.5vw 0.4vw orangered,
        inset 0 0 0.4vw 0.2vw rgb(250, 127, 83),
        inset 0 0 0.5vw 0.2vw rgb(250, 127, 83);border-radius:1.5rem;}
        .neon-text{padding:0 3.5rem 0 3.5rem;}

    .justify{
        text-align : justify;
    }
    /************************************************* cards ans boxes ******************************************/

    .cardService1{
        background:white;
        border-bottom : 3px solid orangered;
        position: relative;
        margin:auto;
        width:80%;
        box-shadow: 2px 2px 15px 8px rgba(172, 172, 172, 0.124);
    }
    .cardService2{
        background:white;
        border-bottom : 3px solid orange ;
        position: relative;
        margin:auto;
        width:80%;
        box-shadow: 2px 2px 15px 8px rgba(172, 172, 172, 0.124);
    }

    .titreRubrique{
        position:absolute;
        top:50%;left:50%;
        transform:translate(-50%, -50%);
        color:white;
        font-family:'myriad pro';}

    /************************************************ boutons ***************************************/

    .btnorangered, .btnorangeredb{
        background:orangered;
        color:white;
        text-decoration: none;
        width:40%;
        font-size:1.2rem;
        padding:20px 20px; 
        border : 1px solid orangered;
        }

    .btnorangered:hover{
        background:transparent;
        color:black;
        text-decoration: none;
        transition: all 1s;
        border : 1px solid black;
        }

    .btnorangeredb:hover{
        background:transparent;
        color:rgb(255, 255, 255);
        text-decoration: none;
        transition: all 1s;
        border : 1px solid rgb(255, 255, 255);
    }
    #btntravaux{
        background:orangered;
        color:white;
        font-size:1.3rem;
        padding:10px 30px;
        border : none;
        border-radius : 25px;
    }
    #btntravaux:hover{
        background:rgb(179, 48, 0);
        color:white;
        transition : all 1000;
    }
            
    #btncontact{
        background:rgb(255, 166, 0) ;
        color:white;
        font-size:1.3rem;
        padding:10px 30px;
        border : none;
        border-radius : 25px;
    }

    #btncontact:hover{
        background:rgb(189, 123, 0);
        color:white;
        transition : all 1000;
    }
    /********************************************* media screen***************************************/

    @media screen and (max-width:600px){
        .text1{ 
            font-size: 2rem;
        }
        #btncontact, #btntravaux{ 
            padding:9px 12px;
            font-size:1.1rem;
        }
        .textoffre{
            font-size: 0.7rem;
        }
        .cardService1, .cardService2{
            width:100%;
        }
        .banner, .ok{
            -webkit-background-size:cover;
            background-size:cover;
            background-position:center center;
            background-repeat:no-repeat;
            height:60vh;}
        }
    @media screen and (max-width:900px){
        .nav-link{text-align:center;
        }
        #dropdown-menuaeffacer {
            display:none;
        }
    }

 
/********************************************** le navbar ********************************************/
#navscol{
    background-color:rgba(20, 20, 20,0.56) !important;
}
#navscol.scrolled{
    background-color:rgba(20, 20, 20,1) !important;transition:1000ms ease-in-out;
}
.dropdown:hover>.dropdown-menu{display:block;}
.dropdown>.dropdown-toggle:active{pointer-events:none;}
.dropdown-item:hover{background-color:orangered;color:white}