/*******************************************************************************
  Global.css 

   Style global pour la page main.
*******************************************************************************/


/* RESET CSS -----------------------------------------------------------------*/
*
{
    padding               : 0px                        ;
    margin                : 0px                        ;
    border                : none                       ;
    outline               : none                       ;
    box-sizing            : border-box                 ;
}

/* HTML,BODY -----------------------------------------------------------------*/
html,body
{
    height                : 100%                       ;
}

/* BODY ----------------------------------------------------------------------*/
body
{
    font-family           : "Roboto",Arial,sans-serif  ;
    position              : relative                   ;
    font-weight           : 500                        ;
    font-style            : normal                     ;
    font-size             : 14px                       ;
   -webkit-font-smoothing : antialiased                ;
   -moz-osx-font-smoothing: grayscale                  ;
    line-height           : 1.7em                      ;
    background-color      : #fff;
/*    background-image:  url('../../common/img/bck_all.png');
    background-repeat: no-repeat;
    background-size: 150%;
    background-position:top center;*/
}

/*FOR SELECT DOT ON MOZ*/
select:-moz-focusring {
  color:transparent;
  text-shadow:0 0 0 #000; 
}
select:-moz-focusring * {
  color:#000; 
  text-shadow:none;
}

/* a -------------------------------------------------------------------------*/
a
{
   text-decoration        : none                       ; 
}
a:visited
{  
    color                 : inherit                    ;
}

/* titre ---------------------------------------------------------------------*/
h1{
    font-family           : 'Titillium Web', sans-serif                        ;
    font-weight           : 600                                                ;
    line-height: 1.1em;
}

h1.tt{
    font-family           :'Roboto', sans-serif                        ;
    font-weight: 300;
    color:#0c71c3;
    border-bottom:solid 2px #0c71c3;
    font-size: 25px!important;
    margin-bottom:24px;
    text-align: left;
    padding-bottom:6px!important;
    border-left: none!important;
    padding-left: 0px;
}
    


h2
{
    font-size             : 18px                       ;
    margin                : 10px 0px                   ;
}

h2.tt{
    
    font-family           :'Roboto', sans-serif                        ;
    font-weight: 300;
    color:#0c71c3;
    border-bottom:solid 1px #0c71c3;
    font-size: 18px!important;
    margin:20px 0px 20px;
    text-align: left;
    padding-bottom:4px!important;
    clear:both;
}

h3
{
    font-size             : 16px                       ;
    margin                : 5px 0px                    ;
}

label
{
    text-align: left;
}



/*******************************************************************************
  icon.css 

  Style des icons du sprite icon.png

- avatar
- back
- comment
- ham
*******************************************************************************/

/* GENERIQUE     -------------------------------------------------------------*/
.icon
{
    display             : inline-block          ;
    z-index             : 5                     ;
    cursor              : pointer               ;
    fill                : #666                  ;
    stroke              : #666                  ;
    vertical-align      : bottom                ;  
}

.icon svg
{
    transition : fill 0.4s ease-in-out,stroke 0.4s ease-in-out   !important   ;
}

.icon:hover
{
    fill                : #2ea3f2               ;
    stroke              : #2ea3f2               ;
}
/* ARROW DOWN     ------------------------------------------------------------*/
.arrow-down
{
    vertical-align: text-top;
}
.arrow-down svg,.arrow-tab svg
{
    width:10px;
/*    height:5.5px;*/
}

/* MENU     ------------------------------------------------------------*/
.menu svg
{
    width:9px;
    height:5px;
}
/* AVATAR     -----------------------------------------------------------------*/
.avatar
{
    width               : 28px                  ;
    height              : 28px                  ;
    background-position : -3px -42px            ;
}
/* BACK     -------------------------------------------------------------------*/
.back
{
    display             : none                  ;
    width               : 23px                  ;
    height              : 19px                  ;
    background-position : -3px -3px             ;
    position            : fixed                 ;
    top                 : 12px                  ;
    left                : 10px                  ;
}
/* COMMENT     ---------------------------------------------------------------*/
.icon-comment
{
    vertical-align      : middle                ;
    width               : 16px                  ;
    height              : 16px                  ;
    background-position : -3px -76px            ;
}
/* HAMBURGER     -------------------------------------------------------------*/
.ham
{
    display             : none                  ;
    margin              : 0px 10px              ;
    cursor              : pointer               ;
    fill:#2ea3f2;
    stroke:none!important;
}

.ham svg
{
    width               : 20px                  ;
    height              : 17px                  ;
    transition          : all 0.2s ease-in-out  ;
    
}
/* SEARCH     -------------------------------------------------------------*/
.search svg
{
    width:21px;
    height:19px;
    fill:#fff!important;
    stroke:#fff!important;
}
/* CROSS     -------------------------------------------------------------*/
.cross svg
{
    width:15px;
    height:15px;
}
/* FACEBOOK TWITTER     -----------------------------------------------------*/
.facebook svg,.twitter svg
{
    width:42px;
    height:42px;
    color:#666!important;
}
/* PIECE JOINTE     -----------------------------------------------------*/
.join,.join svg{
    width:28px;
    height:24px;
}

.join:hover
{
    fill                : #3A2A96               ;
    stroke              : #3A2A96                  ;
}




/******************************************************************************* 
STYLE DIVER
********************************************************************************/
#wrapper
{
    position         : relative                                                ;
    width            : 100%                                                    ;
/*    min-height       : calc(100vh - 169px)                                     ;*/
    margin           : auto                                                    ;
    top      : 100px                                                    ;
    height:calc(100% - 100px);
}

.section
{
    width:100%;                                          
}

.container
{
    padding-top:32px;
    position:relative;
    max-width : 1080px;
    width:98%;
    margin:auto;
    clear:both;
}

.form.container{
    max-width: 800px;
}

.block_header
{
    padding-top:100px;
    color:#fff;
    text-align: center;
    font-family:  "Open Sans",Arial,sans-serif;
    font-size: 18px;
    line-height: 2em;
    padding-bottom:100px;
    background:url('../img/bck_header.png')no-repeat top center;
    background-size: 85%;
}


.block_header h1
{
    font-family: 'Titillium Web',Helvetica,Arial,Lucida,sans-serif;
    font-size: 66px;
    line-height: 1.5em;
    font-weight: 500;
    margin-bottom:20px;
}

.block_header p
{
    width:70%;
    margin:auto;
}

.cursor-p
{
    cursor:pointer;
}

/*******************************************************************************
BOUTON ADD
*******************************************************************************/
a.btn_add,a.btn_add:visited
{
    display               : inline-block                                       ;
    float                 : right                                              ;
    height: 30px;
    line-height: 23px;
    padding: 3px 0px;
    background            : #0c71c3!important                                  ;
    color                 : #fff                                               ;
    text-align            : center                                             ;
    min-width:100px;
    margin-left:10px;
    opacity:1;
    transition: all .2s;
    font-size: 16px;
/*    margin-top: -32px;*/
    margin-right: 8px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.btn_add:hover{
    opacity:0.8;
}



.hide
{
    display:none!important;
}

.center
{
    text-align: center!important;
}


.txt-left
{
    text-align: left;
}



.mbottom30{
    margin-bottom:30px;
}


.btn_tgp{
    position: absolute;
    display: inline-block;
    top: 9px;
    right: 7px;
    width: 25px;
    opacity:0.8;
    cursor:pointer;
    transition: opacity 0.4s ease-in-out;
}

.btn_tgp:hover{
    opacity:1;
}

.fright{
    float:right;
}
/*#page-container{
    padding-top:0px!important;
}
#et-main-area{
    padding-top:80px;
    transition      : all .4s ease-in-out     ;
}*/
/* #HEADER bandeau du haut     -----------------------------------------------*/
#header
{
    width           : 100%                    ;
    background      : #00213a                 ;
    height          : 100px                    ;
    z-index         : 50                      ;
    position        : absolute                ;
    top             : 0px                     ; 
    left            : 0px                     ;
    box-shadow      : 0 2px 10px rgba(0,0,0,.2);
    border-bottom   : solid 1px rgba(0,0,0,.1);
    
}

/*#header.onscroll
{
    height          : 54px                    ;
    box-shadow      : none                    ;
}


#header.onscroll #menu
{
    top             : 15px                    ;
}*/

/*#header.onscroll #block_icon_nav,#header.onscroll #block_search{
    top:18px;
}*/


/*#header.onscroll .ss_menu{
    margin-top      :-11px                    ;
}


#header.onscroll img.logo
{
    margin-top      : 10px                    ;
    width           : 159px                   ;
}*/


/* #MENU style scroll vers le bas    -----------------------------------------*/


/* #HEADER LOGO      ---------------------------------------------------------*/
#header img.logo
{
    display         : inline-block            ;
    margin-top      : 20px                    ;
    width           : 291px                   ;
    height          : auto                    ;
    margin-left     : 34px                    ; 
    transition      : all .4s ease-in-out     ;
    vertical-align:middle;
}




/*  BLOCK ICONE SEARCH ET MENU     -------------------------------------------*/
#block_icon_nav
{
    position            : absolute              ;
    top                 : 32px                  ;
    right               : 26.5px                  ;
    opacity             : 1                     ; 
/*    transition          : all 0.4s ease-in-out  ;*/
    z-index             : 10;
}

#block_icon_nav span{
    margin-left:15px;
}

#block_icon_nav.hide,#menu.hide{
    top:0px;
    opacity:0;
    z-index:1;
}

.hide_item_desktop{
    display:none!important;
}

#user_log{
    color: white;
display: inline-block;
top: -26px;
position: relative;
left: 20px;
}





/*  BARRE DE RECHERCHE     ---------------------------------------------------*/
#block_search{
    position:absolute;
    top:0px;
    right:30px;
    width:50%;
    opacity:0;
    transition          : all 0.4s ease-in-out  ;
    z-index:1;
    background:#00213a;
}

#block_search svg{
    fill:#fff;
    stroke:none;
}

#block_search.display{
    top:34px;
    opacity:1;
    z-index: 50;
}

#input_search{
     background:#00213a;
     color:#fff;
}

#search
{
  color:#333;
  width:90%;
  display:inline-block;
  background:none;
  padding-bottom:2px;
  font-size:1em;
 
}
/*  BOUTON BARRE DE RECHERCHE     --------------------------------------------*/
#btn_cross{
    float:right;
    margin-top:2px;
}
/******************************************************************************* 
STYLE POUR LE MENU ORDI
********************************************************************************/

/* #MENU     -----------------------------------------------------------------*/
#menu
{
    list-style-type : none                    ;
    position        : absolute                ;
    top             : 38px                    ;
    right           : 8px                    ;
    font-weight     : 600                     ;
    transition      : all 0.4s ease-in-out    ;
    display         : block                   ;
    opacity         : 1                       ;
    z-index:10;
    font-family:  "Open Sans",Arial,sans-serif;
    font-weight: 600;
}

#menu svg{
    stroke:#fff;
}

#menu li.focus svg{
    stroke:#2ea3f2;
}





#menu img
{
    position:relative;
    top:-2px;
    right:0px;
}

/* #MENU LI    ---------------------------------------------------------------*/
#menu li
{
    display         : inline-block            ;
    text-align      : left                    ;
    padding-right   : 22px                    ;
    vertical-align  : baseline                ;
    line-height     : 1                       ;
    height          : content-box             ;
     
    
}
/* #MENU LES LIENS    --------------------------------------------------------*/
#menu li a,#menu li a:visited
{
    display         : inline-block!important  ;
    color           : #fff                    ;
    font-weight     : 600                     ;
    padding-bottom  : 26px                    ;
    opacity         : 1                       ;
    display         : block                   ;
    transition      :  opacity 0.4s ease-in-out    ;
    
}
#menu li:hover a
{
    opacity         : 0.7                     ;
}

#menu li:hover .ss_menu a
{
    color           : #fff ;
    opacity:1;
}

#menu li.focus a,#menu li.focus:hover,#menu li .ss_menu li.focus a,#menu li .ss_menu li.focus:hover
{
    color           : #2ea3f2                 ;
}

#menu li.focus .ss_menu a,#menu li.focus:hover .ss_menu li{
/*    color           : rgba(0,0,0,.6)          ;*/
}
/* #MENU LES LIENS sur li.focus    -------------------------------------------*/
#menu li.focus:hover a
{
    opacity         : 1                       ;
}

#menu li.item li a:hover
{
        background      : rgba(0,0,0,.03);
        opacity:0.7!important;
}

.ss_menu
{
    border-top      : solid 3px #003f66       ;
    position        : absolute                ;
    top             : 55px                    ;
    min-width       : 240px                   ;
    width           : auto                    ;
    background      : #002642                 ;
    padding         : 20px 0px                ;
    visibility      : hidden                  ;
    opacity         : 0                       ;
    transition      : all 0.2s ease-in-out    ;
}


.ss_menu li
{
    display         : block!important         ;
    text-align      : left                    ;
    padding         : 0 20px!important        ;
    line-height     : 2em!important           ;
}
.ss_menu li a
{
    width           : 100%                    ;
    padding         : 6px 20px!important      ;
/*    background      : #00213a                 ;*/
                    
    cursor          : pointer                 ;
    font-weight     : 600                     ;
    color:#fff;
}

.ss_menu a:hover
{
    background   : rgba(0,0,0,.03)         ;    
/*    opacity:0.7;*/
/*    color           : rgba(0,0,0,0.6)!important;*/
}



#menu li:hover .ss_menu
{
    visibility      : visible                 ;
    opacity         : 1                       ;
}

.menu_avatar{
    vertical-align: middle;
    border-radius: 15px;
    width:30px;
    height:30px;
}

.btn_tuto,.btn_hyp,.btn_news{
    padding:10px!important;
    border-radius: 3px;
}

.btn_hyp{
    background-color:#0000fe;
}

.btn_tuto{
    background-color:#be10e8;
}

.btn_news{
    background-color:#0879BF;
}

#hamburger{
    display:none;
}

/******************************************************************************/
/*                             WAIT                                         

    Le please wait est utilise dans la page principale mais aussi dans l'iframe.

*/
/******************************************************************************/
/* conteneur    --------------------------------------------------------------*/
#wait
{
    position         : absolute                      ;
    top              : 0px                           ;
    left             : 0px                           ;
    width            : 100%                          ;
    height           : 100%                          ;
    z-index          : 30                            ;
    background       : rgba(255,255,255,0.9)         ;
}
/* GIF     -------------------------------------------------------------------*/
#wait img
{
    display          : block                         ;
    margin           : auto                          ;
    margin-top       : 150px                         ;
    width            : 105px                         ;
    height           : 105px                         ;
}

/******************************************************************************
 FORMULAIRE 
*******************************************************************************/
.form{
   
    padding-top:57px;
    
}

h1.del{
    color:#c40c0c!important;
    border-color:#c40c0c;
}

.form form{
    max-width:92%;
    
}

.form p{
    margin:0px 0px 13px;
}

form br{
    clear:both;
}
/* FORMULAIRE LIGNE HORIZONTALE     ------------------------------------------*/
form hr
{
    display         : inline-block                                             ;
    width           : 100%                                                     ;
    border-bottom   : solid 1px #000                                           ;
    margin          : 15px 0px                                                 ; 
}
/* INPUT FILE    -------------------------------------------------------------*/
form input[type="file"]
{
    display            : none                                                  ;
}

.inputfile
{
    cursor:pointer;
    width:100%;
    max-width: 295px!important;
    height:40px;
    line-height: 40px;
    /*    margin:0px!important;*/
    border-radius: 6px;
    background:#898989;
    color:#fff;
    text-align: center;
    font-weight: lighter;
    font-size:16px;
}

#filename{
    background:#e2e2e2;
    width:100%;
    max-width: 294px;
    border:solid 1px #b2b2b2;
    color:#191919;
    margin:26px 0px;
    padding:14px 10px;
    display:none;
}

#filename p::before{
    content:'.';
    margin-right:3px;
    font-size:50px;
    display: inline-block;
    position: relative;
    bottom: 1px;
    line-height: 0px;
}


.reset{
    float:right;
    margin-right: 15px;
}

.reset svg{
    fill:#fff;
    stroke:none;
    vertical-align: middle;
    width:15px;
    height:15px;
}
/******************************************************************************
 Les input, textarea, label...
*******************************************************************************/
form input,form textarea,form select
{
    width           : 100%                                                    ;
    display         : inline-block                                             ;
    min-width       : 125px;
    max-width       : 350px;
    height          : 33px                                                     ;
    padding         : 6px                                                 ;
    border          : solid 1px  #8f8e8e                                       ;
    text-indent     : 0px                                                      ;
    font-size       : 14px                                                     ;
    color           :#393939;
    border-radius   : 2px                                                      ; 
    box-sizing: border-box;
    outline:none;
/*    background:#fff;*/
    margin-bottom:17px;

}

select[multiple] {
    height: auto!important;
    background:rgba(255,255,255,1) !important;
    padding:3px;
}

 select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /*background: url(../../common/img/arrow-down.png) 98% / 6% no-repeat rgba(255,255,255,1) !important;*/
    background: url(../../common/img/arrow-down.png) no-repeat rgba(255,255,255,1) ;
    background-position:98.5% center;
    background-size:20px;
    transition:background-color 0.2s ease-in-out;
    cursor                : pointer                                            ;
}

/*FOR SELECT DOT ON MOZ*/
 select:-moz-focusring {
    color:transparent!important;
    text-shadow:0 0 0 #000!important;
}
 select:-moz-focusring * {
    color:#000!important;
    text-shadow:none!important;
}

select:hover, select:active{
    background-color:rgba(0,0,0,0.1)!important;

}


::-webkit-input-placeholder {
  font-size: 14px;
}
::-moz-placeholder {

  font-size: 14px;
}
:-ms-input-placeholder {
  font-size: 14px;
}
::placeholder {
  font-size: 14px;
}
/* INPUT SUBMIT     ----------------------------------------------------------*/
form input[type="submit"]
{
    background      : #2E5CD1                                                  ;
    color           : #fff                                                     ;
    line-height     : 25px                                                     ;
    margin-top      : 10px                                                     ;  
}
/* INPUT CHECKBOX     ----------------------------------------------------------*/
form input[type="checkbox"]
{
    min-width: auto;
    max-width: auto;
    width           : 20px!important                                           ;
    height          : 20px!important                                           ;
    line-height     : auto!important                                           ;
    margin          : auto                                                     ;
    vertical-align  : middle                                                   ;
}
/* TEXTAREA     --------------------------------------------------------------*/
form textarea
{
    min-height      : 200px                                                    ;
}
/* LABEL     -----------------------------------------------------------------*/
form label
{
    display         : block                                                    ;
    margin-bottom:1px;
    color           : #393939                                                  ;
}
/* EDITOR     ----------------------------------------------------------------*/
#editor
{
    min-height     : 300px                                                     ;
}

/* STYLE ERREUR     ----------------------------------------------------------*/
/* pour les champs ou il y a des erreurs     ---------------------------------*/
.error_field
{
    background-color         : #E4C1BA!important                               ;
    border-color       : #DC7662!important                                     ;
    color              : #DC7662                                               ;
}



.msg
{
    padding:14px 10px;
    margin:0px 0px 16px;
    width:100%;
/*    max-width:300px;*/
}

.msg p{
    padding:0px!important;
    margin:0px!important;
}

.msg p:before{
    content: '- ';
}


p.err{
    color:#e13b3b;
    font-size:12px;
    margin-top:-14px;
    margin-bottom:7px;
}

.error
{
    background:#fcdede;
    border-left:solid 1px #ff5a5a;
    color:#ff5a5a;
}

.success
{
    background:#aaf9b7;
    border-left:solid 1px #2ac15a;
    color:#2ac15a; 
}




/* BOUTON GLOBAL     ---------------------------------------------------------*/
.btn_create,.btn_cancel,.btn_edit,.btn_delete
{
    display            : inline-block                                          ;
    border:none!important;
    height: 41px;
    line-height: 41px;
    color              : #fff                                                  ;
    text-align         : center                                                ;
    cursor             : pointer                                               ;
    width              : 109px                                                 ;
    margin-bottom      : 35px                                                 ;
    margin-top         : 35px                                                  ;
    float: right;
    margin-left: 23px;
    border-radius:5px;
    font-size:16px;
    font-weight: 300;
}

.btn_create:hover,.btn_cancel:hover,.btn_edit:hover,.btn_delete:hover{
    opacity:0.85;
}

.title_delete{
    color:#c30d0c!important;
    border-color:#c30d0c!important;
}

/* BOUTON CREATE / EDIT     --------------------------------------------------*/
.btn_create,.btn_edit
{
    background         : #0c71c3                                               ;
}
/* BOUTON DELETE     ---------------------------------------------------------*/
.btn_delete
{
    background         : #c40c0c!important                                               ;
}
/* BOUTON CANCEL     ---------------------------------------------------------*/
.btn_cancel
{
    background         : #898989                                               ;
    left               : calc(3.5% + 250px)                                    ;
}

.btn_cancel a,.btn_cancel a:visited
{
    display            : inline-block                                          ;
    color              : #fff                                                  ;
    width              : 100%                                                  ;
    height             : 100%                                                  ;
}



.col2
{
    display:inline-block;
    width:46%;
    padding:0px 2%;
    vertical-align: top;
}

/* si besoin de 2 colonnes ou plus dans le formulaire     --------------------*/
.col:nth-child(even)
{
    float:right;
}

.col_2,.col_1_4,.col_3_4
{
    width              : calc(50% - 40px)                                      ; 
    display            : inline-block                                          ;
    vertical-align     : top                                                   ; 
    text-align: left;
}

.col_1_4
{
    width              : calc(25% - 40px)                                      ;
}

.col_3_4
{
    width              : calc(75% - 40px)                                      ;
}

.mr30{
    margin-right:30px;
}
.form h1{
    font-size:36px;
    font-weight: 300;
    font-family: Roboto;
    color:#0879bf ;
    margin-bottom:30px;
}

.btn{
    padding:0px 30px;
    height:40px;
    line-height: 40px;
    color:#fff!important;
    font-size:16px;
    width : 100%;
    display:block;
    text-align: center;
    margin:6px 0px 20px!important;
}

.mauto{
    margin:auto;
}

.bck_green
{
    background-color:#0c71c3!important;
    cursor: pointer;
    border-radius: 6px;
    border:none;
}

.bck_purple
{
    background-color:#0c71c3!important;
    border-radius: 6px;
    border:none;
}


a.small
{
    color:#787878;
}

.small
{
    font-size:12px;
}

.underline
{
    text-decoration: underline;
}


.select_form
{
    list-style-type: none;
    margin-top:50px;
}

.select_form li
{
    width:90%;
    border:solid 1px transparent;
    border-bottom:solid 1px rgba(0,0,0,0.1);
    font-size:20px!important;
    height:40px;
    line-height: 40px;
    color:#666;
    padding:0px 20px;
}



.select_form li:hover
{
    color:#0c71c3;
}

.select_form li.focus
{
    border-color:#0c71c3!important;
    color:#0c71c3!important;
}
/******************************************************************************
 FOOTER
*******************************************************************************/
#footer
{
    position         : relative                                                ;
    clear            : both                                                    ;
    width            : 100%                                                    ;
    background       : #00213a                                                 ;
    height:152px;
    font-size:10px;
    color:#fff;
}

#footer .head
{
    position:relative;
    background:#00213a;
    clear            : both                                                    ;
}

#footer a,#footer a:hover,#footer a:visited{
    color:#fff;
   
}

.m80{
    margin-right: 82px;
}

.m90{
    margin-right:97px;
}

#footer p{
    padding:56px 0px;
}

.txt-right{
    text-align: right;
}






#footer .container{
    margin:auto !important;
    padding:inherit;
}

/******************************************************************************* 
STYLE POUR LA PAGE 404
********************************************************************************/
/* p404 div container     ----------------------------------------------------*/
#p404
{
    position       : relative               ;
    border-left    : solid 8px #C0C0C0      ;
    color          : #D1492E                ;
    top            : 90px                   ;
    padding-left   : 10px                   ;
}

/* p404 H1 TITRE     ---------------------------------------------------------*/
#p404 h1
{
    font-size      : 40px                   ;
    line-height    : 33px                   ;
    border:none!important;
    padding:0px!important;
    margin:0px!important;
}

/* p404 HR SAUT DE LIGNE     -------------------------------------------------*/
#p404 hr
{ 
    border-bottom  : solid 7px transparent  ;
}

/* p404 P PARAGRAPHE     -----------------------------------------------------*/
#p404 p
{
    font-size      : 18px                   ;
    text-indent    : 5px                    ;
    line-height    : 15px                   ;
    margin-top     : 3px                    ;
}
/******************************************************************************* 
STYLE POUR LE MENU TABLETTE / TELEPHONE
********************************************************************************/
@media (max-width: 1279px) 
{
    body{
        overflow-x:hidden;
    }
    #header
    {
        position        : absolute                ;
        top             : 0px                     ;
        left            : 0px                     ;
        height:80px;
        transition      : all .4s ease-in-out     ;
    }

    .hide_item_desktop{
        display:inline-block!important;
    }

    /*    #header.onscroll
        {
            height          : 80px                    ;
            box-shadow      : 0 2px 10px rgba(0,0,0,.2);
            transition:none;
        }*/

    #user_log{
        top:-16px;
    }

    #hamburger{
        display:inline;
        cursor:pointer;
    }


    /*    #header.onscroll #menu li
        {
            padding-bottom  : 0px                     ;
        }
    
        #header.onscroll #block_icon_nav,#header.onscroll #block_search{
            top                 : 32px                  ;
        }
    
    
    
        #header.onscroll .ss_menu
        {
            margin-top      : 0px                     ;
        }*/

    #header img.logo /*,#header.onscroll img.logo */
    {
        position:absolute;
        margin-top      : 18px                    ;
        width           : 209px                   ;
        z-index: 10000;
    }

    #menu
    {
        position:absolute;
        width           : 0px                   ;
        max-width: 0px;
        top             : 0px                     ;
        right           : 0px                     ;
        opacity:0;
        background:#003f66!important;
        min-height: 100vh;
        padding         : 79px 0px 0px 0px        ;
        background      : #00213a                 ;
        transition      : all .2s ease-in-out     ; 
    }

    #menu.visible
    {
        opacity         : 1                       ;
        max-width: 300px;
        width:100%;

    }

    #menu li
    {
        display         : block                   ;
        margin          : auto                    ;
        line-height     : 23px                    ;
        width:100%!important;
        padding-right: 0px;

    }

    #menu li a
    {
        padding         : 10px 65px 10px 40px               ;
        max-width:300px;
        display:block!important;
/*        border-bottom   : 2px solid rgba(0,0,0,.03);*/
        width: 100%!important;
        margin:auto;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .icon.arrow-down{
        display:block;
        position:absolute;right:35px;top:9px;
    }


    #menu li{
        position:relative!important;
    }


    /*    #menu li.item a
        {
            font-weight     : 700!important           ;
        }*/

    .ss_menu{

        min-width:100px!important;
        width:100%;margin:auto;
        max-height:0px!important;
        overflow: hidden;
        visibility      : visible                 ;
        opacity         : 1                       ;
        border          : none                    ;
        position        : relative                ;
        top             : -5px!important         ;
        padding         : 0px!important;
        line-height     : 23px!important          ;
        background      : #00213a                  ;
        /*        margin-left:17px;*/
        transition      : all .2s ease-in-out     ; 
        text-indent: 45px;
    }

    .ss_menu.display
    {
        transition      : all .4s ease-in-out     ;   
        height:auto!important;
        max-height: 500px!important;

    }

    .ss_menu li
    {
        overflow:hidden;
        padding:0px !important;
    }

    .ss_menu li,.ss_menu li a
    {
        color:#fff!important;
    }

    .ss_menu li.focus a{
        color:#2ea3f2!important;
    }

    #menu li.item li a
    {
        font-weight     : 600!important           ;
        padding         : 5px  !important           ;
    }



    #menu li a:hover{
        background:rgba(0,0,0,.03);
        opacity:0.7!important;
    }

    /* ICON   ----------------------------------------------------------------*/
    /* On rend les icones visibles  ------------------------------------------*/
    .ham
    {
        display         : inline-block            ;
    }


    .hide_tab
    {
        display:none!important;
    }



    .col_2,.col_2_tab,.col_1_4,.col_3_4
    {
        display:block;
        width:70%;
        margin:auto;
    }

    .col_2 .col_2{
        width:50%;
        display: inline-block;
    }

    .mr30{
        margin:auto;
    }

    form input,form textarea,form select{
        max-width: 100%;
    }


    .btn_tuto,.btn_hyp,.btn_news{
        background-color:transparent;
        padding         : 10px 65px 10px 40px      !important         ;
    }


}
/*STYLE POUR LE MENU EN MODE TELEPHONE*/
@media (max-width: 751px) 
{
    #prev, #next{
        max-width:100px!important;
    }

    .hide_phone{
        display:none!important;
    }

    .col_2,.col_2_tab,.col_1_4,.col_3_4
    {
        display:block;
        width:90%;
        margin:auto;
    }

    .form form{
        max-width:100%;
    }
    
    

    #header img.logo /*,#header.onscroll img.logo */
    {
/*        margin-top      : 24px                    ;
        width           : 130px                   ;*/
    }

    #menu
    {
/*        top:19px;*/
    }

    #block_search{
        width:85%;
        top: 19px!important;
        padding:10px!important;
    }

    #input_search{
        max-width: 193px;

    }




    #footer .head img{

        max-width: 100%;

    }
}