@charset "UTF-8";
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 31 janv. 2018, 16:50:54
    Author     : TRAORE Daouda
*/

/*Mes classe CSS*/
/**
 ** STYLES BY DAOUDA 
 **/

/*Sans clic*/
.ui-menu .ui-menu-list .ui-widget-header {
    font-size: 16px;
    color: #ffffff;
    background-color: transparent !important;
    width: 84% !important;
    border-radius: 1px;
    font-family: 'robotoregular';
    padding: 7px 8%;
}
.ui-menu .ui-menu-list .ui-menuitem {
    font-size: 12px;
    display: table;
    border-radius: 0px;
    text-align: center;
}
.ui-button {
    font-size: 12px;
    font-family: 'robotoregular';
    color: #ffffff;
    text-shadow: none;
    font-weight: normal;
}

.ui-menu .ui-menuitem .ui-menuitem-link {
    color: #000;
    font-family: 'robotoregular';
    font-size: 12px;
    padding: 14px 7px;
    width: 100%;
    border-radius: 0px;
    display: inline-block;
    border: 0px none !important;
}

.ui-menu {
    background-color: transparent;
    -webkit-background-color: transparent !important;
    color: #546e7a;
    border-radius: 2px;
    padding: 0px !important;
    font-family: 'robotoregular';
    -webkit-box-shadow: 0px 0px 0px 0px rgba(43, 59, 93, 0.3);
    -moz-box-shadow: 0px 0px 0px 0px rgba(43, 59, 93, 0.3);
    box-shadow: 0px 0px 0px 0px rgba(43, 59, 93, 0.3);
}
.ui-menu .ui-menuitem .ui-menuitem-link .ui-icon-triangle-1-s {
    background-image: none !important;
    background-position: center !important;
    background-repeat: no-repeat;
    background-size: 0px;
}
.ui-menubar .ui-menuitem {
    width: 16%;
    clear: none;
    margin: 0 auto;
}
.ui-menu .ui-menu-parent .ui-menu-child {
    display: none;
    width: 200%;
    padding: .4em;
    position: absolute;
    margin: 0;
    outline: 0;
    line-height: 0.5 !important;
    text-decoration: none;
    font-size: 100%;
    list-style: none;
}
.ui-menu .ui-menu-parent .ui-menu-child li {
    text-align: left;
}
.ui-widget ui-menuitem ui-corner-all ui-menu-parent ul li{
    text-align: center;
    background-color: red;
}
.ui-menubar .ui-menu-child .ui-menuitem {
    width: 96%;
}

.ui-menu .ui-menu-list .ui-menuitem a.ui-state-hover,
.ui-menu .ui-menu-list a.ui-state-hover {
    background-color: #f5f5f5;
    color: #000;
    width: 95%;
}

.taillePetitMenu{
    font-size:12px !important;
}

.soustitreda
{
    color: #000;
    font-size: 18px;
    font-weight: bold
}

.dialogue{

    height:auto; 
}
.Monbutton {
    outline: none;
    border-radius: 2px !important;
    -webkit-border-radius: 2px !important;
    -moz-border-radius: 2px !important;
    font-size: 13px;
    font-family: 'robotoregular';
    color: #009E60;
    text-shadow: none;
    position: relative;
    background-color: transparent;
    font-weight: normal;
    border: 1px solid #009E60;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
/*Hover des boutons en générale*/

.ui-button.ui-state-focus {
    -webkit-box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
    -moz-box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
    box-shadow: none;
    background-color: transparent;
}
.ui-button.ui-state-hover
{
    background-color: transparent;
}
.Monbutton:hover{
    background-color: #009E60;
    color: #FFF;
}
.Monbutton:focus {
    -webkit-box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
    -moz-box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
    box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
    background-color: #F77F00;
}
.btnMenu {
    outline: none;
    border-radius: 2px !important;
    -webkit-border-radius: 2px !important;
    -moz-border-radius: 2px !important;
    font-size: 13px;
    font-family: 'robotoregular';
    color: #009E60;
    text-shadow: none;
    position: relative;
    background:  -webkit-linear-gradient(top, #01701b 20%, #ffffff 20%, #ffffff 40%, #01701b 40%, #01701b 60%, #ffffff 60%, #ffffff 80%, #01701b 80%, #01701b 100%, #01701b 100%);
    background: -moz-linear-gradient(top, #01701b 20%, #ffffff 20%, #ffffff 40%, #01701b 40%, #01701b 60%, #ffffff 60%, #ffffff 80%, #01701b 80%, #01701b 100%, #01701b 100%);
    font-weight: normal;
    border: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.form-control{display:block;width:100%;
              padding:.375rem .75rem;
              font-size:1rem;
              line-height:1.5;
              color:#000;
              background-color:#fff;
              background-image:none;background-clip:padding-box;border:1px solid #ced4da;
              border-radius:.25rem;
              transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}

.form-control::-ms-expand{background-color:transparent;border:0}

.form-control:focus{color:#000;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .1rem #fff}

.form-control::-webkit-input-placeholder{color:#000;opacity:1}.form-control:-ms-input-placeholder{color:#000;opacity:1}

.form-control::-ms-input-placeholder{color:#000;opacity:1}.form-control::placeholder{color:#000;opacity:1}

.form-control:disabled,.form-control[readonly]{background-color:#e9ecef;opacity:1}

select.form-control:not([size]):not([multiple]){height:calc(2.25rem + 2px)}

select.form-control:focus::-ms-value{color:#000;background-color:#fff}.form-control-file,.form-control-range{display:block}

.col-form-label{padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px);margin-bottom:0;line-height:1.5}

.col-form-label-lg{padding-top:calc(.5rem + 1px);padding-bottom:calc(.5rem + 1px);font-size:1.25rem;line-height:1.5}

.TitreAttribut
{
    color: #000000;
    font-size: 18px;
}

.couleurLien {
    color: #000 !important;
}
.ui-menu {
    width: 18%;
    padding: .3em;
    position: relative;
    outline: 0 none;
}
.PourPetitMenu {
    width: 60% !important;
    padding: .3em;
    position: relative;
    outline: 0 none;
}

.iconHome{
    top: 20% ; z-index: 1800; 
}
.Pourmenupp{
    padding: 0px !important
        margin: 0px
}

.valeurTitreAttribut
{
    color: black; font-size: 14px
}

.radius20{
    border-radius: 10px;
}
.orange {
    display: block;
    background-color: #F3941F;
    color: #ffffff;
}

.pading20{
    padding: 20px;
}
.pading10{
    padding: 10px;
}
.pading15{
    padding: 15px;
}

.pading25{
    padding: 25px;
}
.orangetype {
    display: block;
    background-color: #F3941F;
    color: #F3941F;
}
.noire {
    background-color: #000000;
    color: #ffffff;

}
.noireNl {
    color: #ffffff;
    background-color: #161616;

}

.couleurtexte{
    color: #ffffff !important; 
}
.blanc{
    background-color: #ffffff;
    color: #546e7a;
}
.blue {
    color: #546e7a;
    background-color: #0288D1
}
.blueheader {
    color: #546e7a;
    background-color: #1c8d9a
}
.vert{
    display: block;
    background-color: #0f925a;
    color: #546e7a;
}
.gris{
    color: #778d9b;
}
.grisSombre{
    padding: 0px;
    display: block;
    background-color: #363636;
    color: #546e7a;
}

.ecrirureVert{
    color: #009461;
    font-weight: bold;
}

.bordure{
    border: 1px solid black;
    padding: 5px 5px 5px 5px;
}
.ecrirureBlanc{
    color: #ffffff;
    font-weight: bold;
}

.positionDate{
    bottom: 5px;
    left: 0;
}
.affichertype{
    visibility: hidden;
    height: 0px;

}
.bordureRonde{
    border-radius: 300px; 
    background-color: #ffffff;
    padding: 15px
}

.Menufixe{
    width: 100%;
    height: 170px;
    position: fixed;
    z-index: 100;
    top: 0;
    background-color: #ffffff
}
.jaunePur{
    background-color: #a4cd39 
}
.pading5{
    padding: 5px;
}

.policeAvenir{
    font-family: 'Avenir';
    font-weight: normal;

}
.couleurTxt{
    color: #000000

}
.policeHelveticaNeue{
    font-family: 'helveticaneue';

}
.couleurbtnHm{
    color: #1c8d9a; 
    background-color: #ffffff
}
.couleurbtnMenu{
    color: #000000; 
    background-color: transparent
}
.couleurbtMenu :focus {
    color: #000000; 
    background-color: #ffffff;

}
.couleurOrange{

    color: #F3941F;
}
.couleurVert1{

    color: #006A37;
}
.couleurVert2{
    color: #34b44a;
}
.couleurVert3{
    color: #a4cd39;
}

.couleurBleu1{
    color: #003852;
}

.couleurBleu3{
    color: #006561;
}

.couleurBleu3{
    color: #00939F;
}
.radiusRight{
    border-top-right-radius:  100px ;
    border-bottom-right-radius:  100px ;
}

.divtransformNW-30{
    transform-origin:top;transform: skew(-30deg);
}
.divtransformNW30{
    transform:skew(30deg); padding:0px 20% 0px 20%
}

.styleBox{
    z-index: -99;top  : 40px;transform: skew(-20deg); height: 170px;border-bottom-right-radius: 10px;  left:  15px
}


.ombreBox{
    z-index: 1110;
    box-shadow: 1px 0px 10px 1px #000000;
}
.blocOrange{
    top : 0; z-index: 900;  width: 93%;border-top-right-radius: 35px ; height: 40px;  left: 0px
}

.blocConnect1{
    z-index: 813;;border-bottom-left-radius: 10px ;top : 0px; height: 50px;  right: 2%;transform: skew(40deg);
    width: 10%;

}
.blocConnect11{
    transform: skew(-40deg); padding-left: 15px; width: 100%
}

.blocIconConec{
    padding-top: 5px;
    padding-left: 5px
}

.blocConnect2{
    border-top-left-radius: 15px ;border-bottom-left-radius: 10px ; z-index: 802;top : 0px; height: 50px;  right: 0;
    width: 10%
}

.blocConnect21{
    width: 100%
}
.blocConnectIMG{
    z-index: 20000; top: -3px; right: -18%; width: 30%
}
.blocConnectBTN{
    z-index: 20020; top: 10px; right: -5%; width: 12%
}
.blocConnectIconLOg{
    z-index: 20020; top: 6px; right: -3%; width: 12%
}

.ImageLogin{
    height:50px; width: 230px; 
}

.blocConnect21IMG{

}

.NewBloc{
    background-image:url('../..//images/login.png '); top: 0px; right: 25%
}

.blocInfos{
    border-top-left-radius: 50px; top : 130px; height: 40px;  left:  19.7%; z-index: 710
}
.blocInfos2{
    top : 130px; height: 40px;  left:  75%;     z-index: 710
}

.btnDeconnection {
    outline: none;
    border-radius: 2px !important;
    -webkit-border-radius: 2px !important;
    -moz-border-radius: 2px !important;
    font-size: 13px;
    font-family: 'robotoregular';
    color: #F3941F;
    text-shadow: none;
    position: relative;
    background-color: transparent;
    font-weight: normal;
    border: 1px solid #009E60;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.btnDeconnection:hover{
    background-color: transparent;
    color: #009E60;
}
.btnDeconnection:focus {
    -webkit-box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
    -moz-box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
    box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
    background-color: transparent;
}


.champdeSaisi :hover{
    border: solid 0px #34b44a;
    border-bottom: none;
    color: #000 ;
    background-color: #f5f5f5;
}
.champdeSaisi :focus{
    border: solid 0px #34b44a;
    border-bottom: none;
    color: #000 ;
    background-color: #f5f5f5;
}
.tailleEcriture{
    color: #FFF; font-weight: bold;
}
.TitreActualite{
    color: #009560;
    font-weight: bold;
    font-size: 28px
}
.Imageclassesvc{
    max-width: 100%; height: 175px; display: block;
}
.blocLogo{
    z-index: 501;transform: skew(0deg);top : 30px; height: 140px;  left:  0
}
.ImageLogo{
    height: 140px; margin-left: 30%
}
.btnconnection{
    background-color:transparent; color: #FFF;
    border-color: transparent;
    font-family: 'robotolight';
    font-style: normal;
    font-weight: bold;
    font-size: 14px; width: auto
}

.btnDeconecter{
    background-color:transparent; color: #FFF;
    border-color: transparent;font-family: 'robotolight';
    font-style: normal;
    font-weight: bold;
    font-size: 14px; width: auto
}
.blocLogin{

    width: auto; z-index: 2000
}

.blocMeteo{
    padding-left: 20px ; width: 20%; right: 13%; z-index: 910
}

.blocbourse{
    height: 40px; font-weight: bold ; width: 15%

}
.blocBourse1{
    top : 0px; height: 40px; left: 8%; z-index: 910
}

.blocArmoirie{
    z-index:800 ;top : 32px; height: 60px;  right: 5%; width: 10%
}

.bloclangue{
    z-index:900 ;top : 40px; height: auto;  right: 17%; width: 1%
}

.autreBouton:focus {
    -webkit-box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
    -moz-box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
    box-shadow: inset 0px 0px 10px 0px #F88100 !important;
    background-color: transparent;
}
.autreBouton:hover {
    background-color: transparent;
}
.autreBouton {
    outline: none;
    border-radius: 2px !important;
    -webkit-border-radius: 2px !important;
    -moz-border-radius: 2px !important;
    font-size: 14px;
    font-family: 'robotoregular';
    text-shadow: none;
    position: relative;
    background-color: transparent;
    font-weight: normal;
    border: 0px none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.blocVertleft{
    z-index:951;
    width: 10% ;
    transform: skew(30deg);
    border-top-right-radius: 5px;
    top: -47px; 
    left: 48%;
}
.blocVertright{
    z-index:952;
    width: 10% ;
    top: -47px; 
    left: 44%;
    transform: skew(-30deg);
    border-top-left-radius: 5px;
}
.blocVertIMG{
    z-index:952;
    width: 100% ;
    top: -47px; 
}
.footIMG{
    height: 50px; width: 100%
}
.btnHaut{
    z-index:2000 ;width: 15%; top: -47px; height: 45px; left: 45%;border-radius: 10px ;background-color: transparent
}
.blocNoir{
    margin:2% 0% 0% 20%; padding:10px 10px;height: 150px 
}
.blocBlancimg{
    z-index:1000 ; top: 300px; right: 0  ; height: 274px; transform-origin:top; transform: skew(-30deg); width: 50%
}
.blocImgloogo{
    width: 40%; margin: 10% 10% 0% 70%; z-index: 1500;transform:skew(30deg);
}

.blocBlancimg2{
    z-index:700 ; top: 300px; right: 0px; height: 200px 
}

.blocOrngefoo{
    z-index:1200 ; top: 492px; right: 5%;  transform-origin:top; transform: skew(-30deg);height: 68px;
    -webkit-z-index:1200 ; -webkit-top: 492px; -webkit-right: 5%;  -webkit-transform-origin:top; -webkit-transform: skew(-30deg)
}
.blocOrngefoo1{
    z-index:1150 ; top: 492px; right: 0px; height: 82px;
    -webkit-z-index:1150 ; -webkit-top: 492px; -webkit-right: 0px; -webkit-height: 82px;
}
.contenuOrange{
    padding: 5px;color: white;transform:skew(30deg);-webkit-transform:skew(30deg)
}

.blocReseau{
    z-index:668 ; top: 492px; left: 0px; 
}
.blocReseau1{
    margin:3% 0% 1.2% 20%;color: white;height: 37.5px; padding: 0px
}

.BlocMenuprin{
    z-index:790 ;top : 70px; height: 60px;  left:  20%; width: 75%;
}
.BlocMenuprinvirtuel{
    z-index:400 ;top : 75px; height: 80px;  left:  15%; width: 60%;
}
.Monmenu{
    width: 100%; margin: 0 auto;top : -5px;  z-index: 50000;  
}
.ui-inputfield.ui-state-hover,
.ui-inputfield.ui-state-focus {
    border: none !important;
    color: #F3941F !important;
    background-color: #EEEEEE !important;
}

.ui-tabs-top .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs-top .ui-tabs-nav li.ui-tabs-active a, .ui-tabs-top .ui-tabs-nav li.ui-state-hover a {
    color: #F3941F !important;
}
.ui-tabs-top .ui-tabs-nav li.ui-tabs-selected a {
    color: #F3941F !important;}

.ui-tabs-top .ui-tabs-nav li.ui-tabs-selected, .ui-tabs-top .ui-tabs-nav li.ui-tabs-active, .ui-tabs-top .ui-tabs-nav li.ui-state-hover {
    background-color: transparent !important;
    border: solid 1px transparent !important;
    border-radius: 0px;
    border-bottom: solid 3px #F3941F !important;
}


.PourMap{
    width:100%; height:500px; z-index:1;
}

.dialogueDetailPerso{
    width: 50%;
}

.blocInfos1{
    margin: 0px auto;padding-top: 6px
}
.ImageCallCenter{
    height: 300px; width: 100%
}

@media   (min-width:1350px) and (max-width: 1440px) { 

    .blocReseau1{
        margin:3% 0% 1.2% 20%;color: white;height: 41.5px; padding: 0px
    }
    .blocConnectIMG{
        z-index: 20000; top: -3px; right: -16%; width: 30%
    }
    .blocConnectBTN{
        z-index: 20020; top: 10px; right: -3%; width: 12%
    }
    .blocConnectIconLOg{
        z-index: 20020; top: 6px; right: -1%; width: 12%
    }

    .ImageLogin{
        height:50px; width: 230px; 
    }



    .Containerperso50{ width:90%; float:left;}
    .blocInfos{
        border-top-left-radius: 50px; top : 130px; height: 40px;  left:  19.7%; z-index: 710
    }

    .affichertablette{
        visibility: visible;
    }
    .blocMeteo{
        padding-left: 20px ; width: 30%; right: 10%; z-index: 910
    }

    .blocOrange{
        top : 0; z-index: 900;  width: 90%;border-top-right-radius: 35px ; height: 40px;  left: 0px
    }

    .blocConnect1{
        z-index: 813;;border-bottom-left-radius: 10px ;top : 0px; height: 50px;  right: 2%;transform: skew(45.6deg);
        width: 15.4%;

    }
    .blocConnect2{
        border-top-left-radius: 15px ;border-bottom-left-radius: 10px ; z-index: 802;top : 0px; height: 50px;  right: 0;
        width: 15%
    }

    .blocLogo{
        z-index: 501;transform: skew(0deg);top : 30px; height: 140px;  left:  0
    }
    .ImageLogo{
        height: 130px; width: 260px; margin-left: 30%
    }

    .blocConnect11{
        transform: skew(-40deg); padding-left: 15px; width: 100%
    }



    .blocConnect21{
        width: 100%
    }

    .blocConnect1login{
        transform: skew(-45.6deg)

    }


    .blocbourse{
        width: 20%; 

    }
    .blocbourse2{
        width: 80%; 

    }
    .blocBourse1{
        top : 0px; height: 40px; left: 10%; z-index: 910
    }



    .tailleEcriture{
        color: #FFF; font-weight: bold;font-size: 13px
    }

    .blocBlancimg{
        z-index:1000 ; top: 300px; right: 0  ; height: 274px; transform-origin:top; transform: skew(-30deg); width: 50%
    }
    .blocImgloogo{
        width: 40%; margin: 10% 10% 0% 70%; z-index: 1500;transform:skew(30deg);
    }
    .blocArmoirie{
        z-index:820 ;top : 38px; height: 60px;  right: 0%; width: 15%
    }
    .bloclangue{
        z-index:900 ;top : 45px; height: auto;  right: 17%; width: 1%
    }


    /**FOOTER**/


}
@media   (min-width:1300px) and (max-width: 1350px) { 

    .blocBlancimg2{
        z-index:700 ; top: 300px; right: 0px; height: 200px 
    }
    .blocImgloogo{
        width: 70%; margin: 20% 10% 0% 70%; z-index: 1500;transform:skew(30deg);
    }

    .blocOrngefoo{
        z-index: 1200;
        top: 492px;
        height: 70px;
        transform-origin: top;
        transform: skew(-30deg);
        width: 55%;
        left: 45%
    }

    .blocOrngefoo1{
        z-index:1150 ; top: 492px; right: 0px; height: 100px;width: 13%
    }
    .contenuOrange{
        padding: 5px;color: white;transform:skew(30deg);height: 90px;-webkit-transform:skew(30deg); width: 100%
    }
    .blocReseau{
        z-index:668 ; top: 492px; left: 0px;     width: 60%;
    }
    .blocReseau1{
        margin:4% 0% 0.7% 5%;color: white;height: 53px; padding: 0px;
    }



    .blocConnectIMG{
        z-index: 20000; top: -3px; right: -16%; width: 30%
    }
    .blocConnectBTN{
        z-index: 20020; top: 10px; right: -3%; width: 12%
    }
    .blocConnectIconLOg{
        z-index: 20020; top: 6px; right: -1%; width: 12%
    }

    .ImageLogin{
        height:50px; width: 230px; 
    }



    .Containerperso50{ width:90%; float:left;}
    .blocInfos{
        border-top-left-radius: 50px; top : 130px; height: 40px;  left:  19.7%; z-index: 710
    }
    .blocInfos2{
        top : 130px; height: 40px;  left:  70%;     z-index: 710
    }

    .affichertablette{
        visibility: visible;
        height: auto;
    }
    .blocMeteo{
        padding-left: 20px ; width: 30%; right: 10%; z-index: 910
    }

    .blocOrange{
        top : 0; z-index: 900;  width: 90%;border-top-right-radius: 35px ; height: 40px;  left: 0px
    }

    .blocConnect1{
        z-index: 813;;border-bottom-left-radius: 10px ;top : 0px; height: 50px;  right: 2%;transform: skew(45.6deg);
        width: 15.4%;

    }
    .blocConnect2{
        border-top-left-radius: 15px ;border-bottom-left-radius: 10px ; z-index: 802;top : 0px; height: 50px;  right: 0;
        width: 15%
    }

    .blocLogo{
        z-index: 501;transform: skew(0deg);top : 30px; height: 140px;  left:  0
    }
    .ImageLogo{
        height: 130px; width: 260px; margin-left: 30%
    }

    .blocConnect11{
        transform: skew(-40deg); padding-left: 15px; width: 100%
    }



    .blocConnect21{
        width: 100%
    }

    .blocConnect1login{
        transform: skew(-45.6deg)

    }


    .blocbourse{
        width: 20%; 

    }
    .blocbourse2{
        width: 80%; 

    }
    .blocBourse1{
        top : 0px; height: 40px; left: 10%; z-index: 910
    }



    .tailleEcriture{
        color: #FFF; font-weight: bold;font-size: 13px
    }

    .blocBlancimg{
        z-index:1000 ; top: 300px; right: 0  ; height: 250px; transform-origin:top; transform: skew(-30deg); width: 50%
    }
    .blocImgloogo{
        width: 40%; margin: 10% 10% 0% 70%; z-index: 1500;transform:skew(30deg);
    }
    .blocArmoirie{
        z-index:820 ;top : 38px; height: 60px;  right: 0%; width: 15%
    }
    .bloclangue{
        z-index:900 ;top : 45px; height: auto;  right: 17%; width: 1%
    }


    /**FOOTER**/


}

/**POUR TABLETTE**/

@media   (min-width:1000px) and (max-width: 1026px) { 


    .ui-menu .ui-menuitem .ui-menuitem-link {
        color: #000;
        font-family: 'robotoregular';
        font-size: 12px;
        padding: 14px 0;
        width: 100%;
        border-radius: 0;
        display: inline;
        border: 0 none!important;
    }
    .ui-menu .ui-menu-list .ui-menuitem {
        font-size: 12px;
        display: table;
        border-radius: 0px;
        text-align: center;
    }
    .ui-menu {
        background-color: transparent;
        color: #546e7a;
        border-radius: 2px;
        padding: 0px !important;
        font-family: 'robotoregular';
        -webkit-box-shadow: 0px 0px 0px 0px rgba(43, 59, 93, 0.3);
        -moz-box-shadow: 0px 0px 0px 0px rgba(43, 59, 93, 0.3);
        box-shadow: 0px 0px 0px 0px rgba(43, 59, 93, 0.3);
    }
    .ui-menu .ui-menuitem .ui-menuitem-link .ui-icon-triangle-1-s {
        background-image: none !important;
        background-position: center !important;
        background-repeat: no-repeat;
        background-size: 0px;
    }
    .ui-menu .ui-menu-parent .ui-menu-child {
        display: none;
        width: 200%;
        padding: .3em;
        position: absolute;
        margin: 0;
        outline: 0;
        line-height: 0.5 !important;
        text-decoration: none;
        font-size: 100%;
        list-style: none;
    }
    .ui-menubar .ui-menuitem {
        width: 18%;
        clear: none;
    }


    .TitreActualite{
        color: #009560;
        font-weight: bold;
        font-size: 20px !important
    }

    .styleBox{
        z-index: -99;top  : 40px;transform: skew(-20deg); height: 150px;border-bottom-right-radius: 10px;  left:  15px
    } 

    .blocConnectIMG{
        z-index: 20000; top: -3px; right: -12%; width: 30%
    }
    .blocConnectBTN{
        z-index: 20020; top: 10px; right: -3%; width: 15%
    }
    .blocConnectIconLOg{
        z-index: 20020; top: 6px; right: 2%; width: 12%
    }

    .ImageLogin{
        height:50px; width: 230px; 
    }

    .Containerperso50{ width:90%; float:left;}
    .blocInfos{
        border-top-left-radius: 50px; top : 130px; height: 40px;  left:  19.6%; z-index: 710
    }
    .blocInfos2{
        top : 130px; height: 40px;  left:  68%;     z-index: 710
    }

    .affichertablette{
        visibility: visible;
        height: auto;
    }
    .blocMeteo{
        padding-left: 20px ; width: 30%; right: 15%; z-index: 910
    }

    .blocOrange{
        top : 0; z-index: 900;  width: 90%;border-top-right-radius: 35px ; transform: skew(15deg); height: 40px;  left: 0px
    }

    .blocConnect1{
        z-index: 813;;border-bottom-left-radius: 10px ;top : 0px; height: 50px;  right: 2%;transform: skew(45.6deg);
        width: 20.4%;

    }

    .blocConnect1login{
        transform: skew(-45.6deg)

    }


    .blocbourse{
        transform: skew(-15deg); width: 20%; 

    }
    .blocbourse2{
        transform: skew(-15deg); width: 80%; 

    }
    .blocBourse1{
        top : 0px; height: 40px; left: 0; z-index: 910
    }

    .blocConnect2{
        border-top-left-radius: 15px ;border-bottom-left-radius: 10px ; z-index: 802;top : 0px; height: 50px;  right: 0;
        width: 20%
    }

    .tailleEcriture{
        color: #FFF; font-weight: bold;font-size: 13px
    }

    .ImageLogo{
        height: 130px; width: 200px; margin-left: 0%
    }
    .blocLogo{
        z-index: 801;transform: skew(0deg);top : 35px; height: 80px;  left:  0
    }
    .blocArmoirie{
        z-index:850 ;top : 38px; height: 60px;  right: 0%; width: 10%
    }
    .bloclangue{
        z-index:900 ;top : 45px; height: auto;  right: 13%; width: 1%; background-color: transparent;
    }


    /**FOOTER**/
    .autreBouton:focus {
        -webkit-box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
        -moz-box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
        box-shadow: inset 0px 0px 10px 0px #F88100 !important;
        background-color: transparent;
    }
    .autreBouton:hover {
        background-color: transparent;
    }
    .autreBouton {
        outline: none;
        border-radius: 2px !important;
        -webkit-border-radius: 2px !important;
        -moz-border-radius: 2px !important;
        font-size: 12px !important;
        font-family: 'robotoregular';
        text-shadow: none;
        position: relative;
        background-color: transparent;
        font-weight: normal;
        border: 0px none;
        left: -7%;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
    .blocVertleft{
        z-index:951;
        width: 15% ;
        transform: skew(30deg);
        border-top-right-radius: 5px;
        top: -47px; 
        left: 48%;
    }
    .blocVertright{
        z-index:952;
        width: 10% ;
        top: -47px; 
        left: 40%;
        transform: skew(-30deg);
        border-top-left-radius: 5px;
    }
    .btnHaut{
        z-index:2000 ;width: 20%; top: -47px; height: 45px; left: 42.5%;border-radius: 10px; background-color: transparent;
    }
    .texteDubtn{
        font-size: 12px
    }
    .texteDubtnicon{
        font-size: 12px
    }
    .blocNoir{
        margin:2% 0% 0% 10%; padding:1px 1px;height: 150px 
    }
    .blocBlancimg{
        z-index:1000 ; top: 300px; right: 0  ; height: 252.3px; transform-origin:top; transform: skew(-30deg); width: 50%
    }
    .blocBlancimg2{
        z-index:700 ; top: 300px; right: 0px; height: 200px 
    }
    .blocImgloogo{
        width: 70%; margin: 20% 10% 0% 70%; z-index: 1500;transform:skew(30deg);
    }

    .blocOrngefoo{
        z-index:1200 ; top: 492px; right: 7%;height: 60.3px;  transform-origin:top; transform: skew(-30deg)
    }

    .blocOrngefoo1{
        z-index:1150 ; top: 492px; right: 0px; height: 60.3px;width: 50%
    }
    .contenuOrange{
        padding: 5px;color: white;transform:skew(30deg);height: 40px;-webkit-transform:skew(30deg)
    }
    .blocReseau{
        z-index:668 ; top: 492px; left: 0px; 
    }
    .blocReseau1{
        margin:1.5% 0% 0.7% 5%;color: white;height: 28px; padding: 0px;
    }


}

@media   (min-width:1026px) and (max-width: 1300px) { 


    .ui-menu .ui-menuitem .ui-menuitem-link {
        color: #000;
        font-family: 'robotoregular';
        font-size: 12px;
        padding: 14px 0;
        width: 100%;
        border-radius: 0;
        display: inline-block;
        border: 0 none!important;
    }

    .ui-menu .ui-menu-list .ui-menuitem {
        font-size: 12px;
        display: table;
        border-radius: 0px;
        text-align: center;
    }

    .ui-menubar .ui-menuitem {
        width: 20%;
        clear: none;

    }
    .ui-menu {
        background-color: transparent;
        color: #546e7a;
        border-radius: 2px;
        padding: 0px !important;
        font-family: 'robotoregular';
        -webkit-box-shadow: 0px 0px 0px 0px rgba(43, 59, 93, 0.3);
        -moz-box-shadow: 0px 0px 0px 0px rgba(43, 59, 93, 0.3);
        box-shadow: 0px 0px 0px 0px rgba(43, 59, 93, 0.3);
    }
    .ui-menu .ui-menuitem .ui-menuitem-link .ui-icon-triangle-1-s {
        background-image: none !important;
        background-position: center !important;
        background-repeat: no-repeat;
        background-size: 0px;
    }
    .ui-menu .ui-menu-parent .ui-menu-child {
        display: none;
        width: 200%;
        padding: .3em;
        position: absolute;
        margin: 0;
        outline: 0;
        line-height: 0.5 !important;
        text-decoration: none;
        font-size: 100%;
        list-style: none;
    }


    .TitreActualite{
        color: #009560;
        font-weight: bold;
        font-size: 20px !important
    }

    .styleBox{
        z-index: -99;top  : 40px;transform: skew(-20deg); height: 150px;border-bottom-right-radius: 10px;  left:  15px
    } 

    .blocConnectIMG{
        z-index: 20000; top: -3px; right: -12%; width: 30%
    }
    .blocConnectBTN{
        z-index: 20020; top: 10px; right: -3%; width: 15%
    }
    .blocConnectIconLOg{
        z-index: 20020; top: 6px; right: 2%; width: 12%
    }

    .ImageLogin{
        height:50px; width: 230px; 
    }

    .Containerperso50{ width:90%; float:left;}
    .blocInfos{
        border-top-left-radius: 50px; top : 130px; height: 40px;  left:  19.6%; z-index: 710
    }
    .blocInfos2{
        top : 130px; height: 40px;  left:  68%;     z-index: 710
    }

    .affichertablette{
        visibility: visible;
        height: auto;
    }
    .blocMeteo{
        padding-left: 20px ; width: 30%; right: 15%; z-index: 910
    }

    .blocOrange{
        top : 0; z-index: 900;  width: 90%;border-top-right-radius: 35px ; transform: skew(15deg); height: 40px;  left: 0px
    }

    .blocConnect1{
        z-index: 813;;border-bottom-left-radius: 10px ;top : 0px; height: 50px;  right: 2%;transform: skew(45.6deg);
        width: 20.4%;

    }

    .blocConnect1login{
        transform: skew(-45.6deg)

    }


    .blocbourse{
        transform: skew(-15deg); width: 20%; 

    }
    .blocbourse2{
        transform: skew(-15deg); width: 80%; 

    }
    .blocBourse1{
        top : 0px; height: 40px; left: 0; z-index: 910
    }

    .blocConnect2{
        border-top-left-radius: 15px ;border-bottom-left-radius: 10px ; z-index: 802;top : 0px; height: 50px;  right: 0;
        width: 20%
    }

    .tailleEcriture{
        color: #FFF; font-weight: bold;font-size: 13px
    }

    .ImageLogo{
        height: 130px; width: 200px; margin-left: 0%
    }
    .blocLogo{
        z-index: 801;transform: skew(0deg);top : 35px; height: 80px;  left:  0
    }
    .blocArmoirie{
        z-index:850 ;top : 38px; height: 60px;  right: 0%; width: 10%
    }
    .bloclangue{
        z-index:900 ;top : 45px; height: auto;  right: 13%; width: 1%; background-color: transparent;
    }


    /**FOOTER**/
    .autreBouton:focus {
        -webkit-box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
        -moz-box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
        box-shadow: inset 0px 0px 10px 0px #F88100 !important;
        background-color: transparent;
    }
    .autreBouton:hover {
        background-color: transparent;
    }
    .autreBouton {
        outline: none;
        border-radius: 2px !important;
        -webkit-border-radius: 2px !important;
        -moz-border-radius: 2px !important;
        font-size: 12px !important;
        font-family: 'robotoregular';
        text-shadow: none;
        position: relative;
        background-color: transparent;
        font-weight: normal;
        border: 0px none;
        left: -7%;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
    .blocVertleft{
        z-index:951;
        width: 15% ;
        transform: skew(30deg);
        border-top-right-radius: 5px;
        top: -47px; 
        left: 48%;
    }
    .blocVertright{
        z-index:952;
        width: 10% ;
        top: -47px; 
        left: 40%;
        transform: skew(-30deg);
        border-top-left-radius: 5px;
    }
    .btnHaut{
        z-index:2000 ;width: 20%; top: -47px; height: 45px; left: 42.5%;border-radius: 10px; background-color: transparent;
    }
    .texteDubtn{
        font-size: 12px
    }
    .texteDubtnicon{
        font-size: 12px
    }
    .blocNoir{
        margin:2% 0% 0% 10%; padding:1px 1px;height: 150px 
    }
    .blocBlancimg{
        z-index:1000 ; top: 300px; right: 0  ; height: 252.3px; transform-origin:top; transform: skew(-30deg); width: 50%
    }
    .blocBlancimg2{
        z-index:700 ; top: 300px; right: 0px; height: 200px 
    }
    .blocImgloogo{
        width: 70%; margin: 20% 10% 0% 70%; z-index: 1500;transform:skew(30deg);
    }

    .blocOrngefoo{
        z-index:1200 ; top: 492px; right: 7%;height: 60.3px;  transform-origin:top; transform: skew(-30deg)
    }

    .blocOrngefoo1{
        z-index:1150 ; top: 492px; right: 0px; height: 60.3px;width: 50%
    }
    .contenuOrange{
        padding: 5px;color: white;transform:skew(30deg);height: 40px;-webkit-transform:skew(30deg)
    }
    .blocReseau{
        z-index:668 ; top: 492px; left: 0px; 
    }
    .blocReseau1{
        margin:1.5% 0% 0.7% 5%;color: white;height: 28px; padding: 0px;
    }


}


@media (min-width:800px) and (max-width: 1000px) {

    .ui-menu .ui-menuitem .ui-menuitem-link .ui-icon-triangle-1-e {
        background-image: url(/PUSP2018-war/f/javax.faces.resource/images/rightarrow-navy.svg?ln=primefaces-modena);
        background-position: center !important;
        background-repeat: no-repeat;
        background-size: 100%;
    }
    .ui-menu .ui-menu-parent .ui-menu-child {
        display: none;
        width: 100%;
        padding: .3em;
        position: absolute;
        margin: 0;
        outline: 0;
        line-height: 0.5 !important;
        text-decoration: none;
        font-size: 100%;
        list-style: none;
    }
    .ui-menu .ui-menuitem .ui-menuitem-link .ui-icon-triangle-1-s {
        background-image: none !important;
        background-position: center !important;
        background-repeat: no-repeat;
        background-size: 0px;
    }

    .ui-menu {
        background-color: #ffffff;
        color: #546e7a;
        border-radius: 2px;
        padding: 0px !important;
        font-family: 'robotoregular';
        -webkit-box-shadow: 0px 1px 2px 0px rgba(43, 59, 93, 0.3);
        -moz-box-shadow: 0px 1px 2px 0px rgba(43, 59, 93, 0.3);
        box-shadow: 0px 1px 2px 0px rgba(43, 59, 93, 0.3);
    }

    .blocConnectIMG{
        z-index: 20000; top: -3px; right: 5%; width: 20%
    }
    .blocConnectBTN{
        z-index: 20020; top: 11px; right: -5%; width: 20%
    }
    .blocConnectIconLOg{
        z-index: 20020; top: 7px; right: 6%; width: 12%
    }

    .ImageLogin{
        height:50px; width: 250px; 
    }

    .afficherAutre{
        visibility: hidden;
        height: 0px;
    }
    .taillePetitMenu{
        font-size:12px !important;
    }

    .affichertype{
        visibility: hidden;
        height: 0;
    }
    .blocLogin{

        width: auto; z-index: 20000
    }
    .btnconnection{
        background-color:transparent; color: #FFF;
        border-color: transparent;
        font-family: 'robotolight';
        font-style: normal;
        font-weight: bold;
        font-size: 16px; width: auto
    }
    .btnDeconecter{
        background-color:transparent; color: #FFF;
        border-color: transparent;font-family: 'robotolight';
        font-style: normal;
        font-weight: bold;
        font-size: 16px; width: auto
    }

    .ImageLogo{
        height: 100px; width: 185px; 
    }
    .blocLogo{
        z-index: 1001;transform: skew(0deg);top : 0px; height: 80px;  left:  0
    }

    .Menufixe{
        width: 100%;
        height: 150px;
        position: fixed;
        z-index: 100;
        top: 0;
        background-color: #ffffff
    }

    .tailleEcriture{
        color: #FFF; font-weight: bold;font-size: 12px
    }
    .blocConnect1{
        z-index: 803;;border-bottom-left-radius: 15px ;top : 0px; height: 50px;  right: 2%;transform: skew(45deg);
        width: 22%;
    }
    .blocConnect11{
        transform: skew(-45deg); padding-left: 15px; width: 100%

    }

    .blocConnect2{
        border-top-left-radius: 15px ;border-bottom-left-radius: 25px ; z-index: 802;top : 0px; height: 50px;  right: 0;
        width: 20%
    }

    .blocConnect21{
        width: 100%
    }

    .blocInfos{
        border-top-left-radius: 0px; top : 120px; height: 30px;  left:  0; z-index: 710; width: 100%
    }
    .blocInfos1{
        width: 100%; 
    }
    .blocInfos12{
        height: 100%; width: 30%
    }

    .blocOrange{
        top : 0; z-index: 900; transform: skew(20deg) ;  width: 77.9%;border-top-right-radius: 30px ; height: 50px;  left: 0px;
        background-color: #fff
    }

    .afficheColor{
        background-color: #EEEEEE;
    }
    .TexAlRight{ text-align:center !important;}

    .pading5{
        padding: 5px;
    }

    .positionNormal{
        position: static;
    }

    .height0{
        height: 0px
    }

    .menutel{
        margin-left: 3px;
        height: 20px;
        width: 30px
    }
    .blocMenuTel{
        z-index:20 ;top : 40px; height: 50px;  right: 10%; width: 10%
    }



    .btnMenu {
        outline: none;
        border-radius: 2px !important;
        -webkit-border-radius: 2px !important;
        -moz-border-radius: 2px !important;
        font-size: 13px;
        font-family: 'robotoregular';
        color: #009E60;
        text-shadow: none;
        position: relative;
        background: linear-gradient(top, #01701b 20%, #ffffff 20%, #ffffff 40%, #01701b 40%, #01701b 60%, #01701b 60%, #ffffff 80%, #01701b 80%, #01701b 100%, #01701b 100%);

        font-weight: normal;
        border: none;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
    .btnMenu:hover{
        background: linear-gradient(top, #01701b 20%, #ffffff 20%, #ffffff 40%, #01701b 40%, #01701b 60%, #ffffff 60%, #ffffff 80%, #01701b 80%, #01701b 100%, #01701b 100%);

        color: #FFF;
    }
    .btnMenu:focus {
        -webkit-box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
        -moz-box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
        box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
        background: linear-gradient(top, #01701b 20%, #ffffff 20%, #ffffff 40%, #01701b 40%, #01701b 60%, #ffffff 60%, #ffffff 80%, #01701b 80%, #01701b 100%, #01701b 100%)

    }

    .BlocMenuprin{
        z-index:740 ;top : 60px; height: 55px;  left:  22%; width: 95%
    }
    .bloclangue{
        z-index:900 ;top : 35px; height: auto;  right: 5%; width: 1%
    }
    .TitreActualite{
        color: #009560;
        font-weight: bold;
        font-size: 22px !important
    }

}


/**POUR TELEPHONE**/

@media (min-width:550px) and (max-width: 800px) {
    .dialogue{
        height:400px !important; 
        width: 90% !important;
        overflow-y: auto;
    }

    .ui-menu .ui-menuitem .ui-menuitem-link .ui-icon-triangle-1-e {
        background-image: url(/PUSP2018-war/f/javax.faces.resource/images/rightarrow-navy.svg?ln=primefaces-modena);
        background-position: center !important;
        background-repeat: no-repeat;
        background-size: 100%;
    }

    .ui-menu .ui-menu-parent .ui-menu-child {
        display: none;
        width: 100%;
        padding: .3em;
        position: absolute;
        margin: 0;
        outline: 0;
        line-height: 0.5 !important;
        text-decoration: none;
        font-size: 100%;
        list-style: none;
    }
    .ui-menu {
        background-color: #ffffff;
        color: #546e7a;
        border-radius: 2px;
        padding: 0px !important;
        font-family: 'robotoregular';
        -webkit-box-shadow: 0px 1px 2px 0px rgba(43, 59, 93, 0.3);
        -moz-box-shadow: 0px 1px 2px 0px rgba(43, 59, 93, 0.3);
        box-shadow: 0px 1px 2px 0px rgba(43, 59, 93, 0.3);
    }

    .Imageclassesvc{
        max-width: 100%; height: 90px; display: block;
    }

    .TitreActualite{
        color: #009560;
        font-weight: bold;
        font-size: 20px !important
    }

    .blocConnectIMG{
        z-index: 20000; top: -3px; right: 10%; width: 15%
    }
    .blocConnectBTN{
        z-index: 20020; top: 10px; right: -10%; width: 25%
    }
    .blocConnectIconLOg{
        z-index: 20020; top: 7px; right: 6%; width: 12%
    }

    .ImageLogin{
        height:50px; width: 230px; 
    }

    .taillePetitMenu{
        font-size:20px !important;
    }
    .blocLogin{

        width: auto; z-index: 20000
    }
    .btnconnection{
        background-color:transparent; color: #FFF;
        border-color: transparent;
        font-family: 'robotolight';
        font-style: normal;
        font-weight: bold;
        font-size: 14px; width: auto
    }
    .btnDeconecter{
        background-color:transparent; color: #FFF;
        border-color: transparent;font-family: 'robotolight';
        font-style: normal;
        font-weight: bold;
        font-size: 14px; width: auto
    }

    .ImageLogo{
        height: 100px; width: 220px; margin-bottom: 0%
    }
    .blocLogo{
        z-index: 1001;transform: skew(0deg);top : -10px; height: 80px;  left:  0
    }

    .Menufixe{
        width: 100%;
        height: 150px;
        position: fixed;
        z-index: 100;
        top: 0;
        background-color: #ffffff
    }

    .tailleEcriture{
        color: #FFF; font-weight: bold;font-size: 12px
    }
    .blocConnect1{
        z-index: 803;;border-bottom-left-radius: 10px ;top : 0px; height: 50px;  right: 2%;transform: skew(45deg);
        width: 34%;
    }
    .blocConnect11{
        transform: skew(-45deg); padding-left: 15px; width: 100%

    }

    .blocConnect2{
        border-top-left-radius: 15px ;border-bottom-left-radius: 25px ; z-index: 802;top : 0px; height: 50px;  right: 0;
        width: 32%
    }

    .blocConnect21{
        width: 100%
    }

    .blocInfos{
        border-top-left-radius: 0px; top : 120px; height: 30px;  left:  0; z-index: 710; width: 100%
    }
    .blocInfos1{
        width: 100%; 
    }
    .blocInfos12{
        height: 100%; width: 30%
    }

    .blocOrange{
        top : 0; z-index: 900; transform: skew(20deg) ;  width: 65.7%;border-top-right-radius: 30px ; height: 50px;  left: 0px;
        background-color: #fff
    }
    .afficher{
        visibility: hidden;
        height: 0px;
    }

    .affichertype{
        visibility: visible;
        height: auto;
    }

    .afficheColor{
        background-color: #EEEEEE;
    }
    .TexAlRight{ text-align:center !important;}

    .pading5{
        padding: 5px;
    }

    .positionNormal{
        position: static;
    }

    .height0{
        height: 0px
    }

    .menutel{
        margin-left: 9px;
        height: 30px;
        width: 40px
    }
    .blocMenuTel{
        z-index:20 ;top : 40px; height: 50px;  right: 10%; width: 7%
    }

    .btnMenu {
        outline: none;
        border-radius: 2px !important;
        -webkit-border-radius: 2px !important;
        -moz-border-radius: 2px !important;
        font-size: 13px;
        font-family: 'robotoregular';
        color: #009E60;
        text-shadow: none;
        position: relative;
        background: linear-gradient(top, #01701b 20%, #ffffff 20%, #ffffff 40%, #01701b 40%, #01701b 60%, #01701b 60%, #ffffff 80%, #01701b 80%, #01701b 100%, #01701b 100%);
        -webkit-background: linear-gradient(top, #01701b 20%, #ffffff 20%, #ffffff 40%, #01701b 40%, #01701b 60%, #01701b 60%, #ffffff 80%, #01701b 80%, #01701b 100%, #01701b 100%);
        -moz-background: linear-gradient(top, #01701b 20%, #ffffff 20%, #ffffff 40%, #01701b 40%, #01701b 60%, #01701b 60%, #ffffff 80%, #01701b 80%, #01701b 100%, #01701b 100%);
        -ms-background: linear-gradient(top, #01701b 20%, #ffffff 20%, #ffffff 40%, #01701b 40%, #01701b 60%, #01701b 60%, #ffffff 80%, #01701b 80%, #01701b 100%, #01701b 100%);
        -o-background: linear-gradient(top, #01701b 20%, #ffffff 20%, #ffffff 40%, #01701b 40%, #01701b 60%, #01701b 60%, #ffffff 80%, #01701b 80%, #01701b 100%, #01701b 100%);

        font-weight: normal;
        border: none;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
    .btnMenu:hover{
        background: linear-gradient(top, #01701b 20%, #ffffff 20%, #ffffff 40%, #01701b 40%, #01701b 60%, #ffffff 60%, #ffffff 80%, #01701b 80%, #01701b 100%, #01701b 100%);

        color: #FFF;
    }
    .btnMenu:focus {
        -webkit-box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
        -moz-box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
        box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
        background: linear-gradient(top, #01701b 20%, #ffffff 20%, #ffffff 40%, #01701b 40%, #01701b 60%, #ffffff 60%, #ffffff 80%, #01701b 80%, #01701b 100%, #01701b 100%)

    }

    .login-form {
        width: 350px!important;
        margin: 0 auto;
        padding: 100px 0 30px;		
        color: #7a7a7a;
        border-radius: 25px;
        margin-bottom: 15px;
        font-size: 13px;
        background: transparent;
        border: solid #f3941f 0.8px;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
        padding: 30px;	
        position: relative;
    }
    .login-form h2 {
        font-size: 17px;
        margin: 35px 0 25px;
    }
    .buttonLogin {
        outline: none;
        border-radius: 10px !important;
        -webkit-border-radius: 10px !important;
        -moz-border-radius: 10px !important;
        font-size: 13px;
        font-family: 'robotoregular';
        color: #fff;
        text-shadow: none;
        position: relative;
        background-color: #f3941f;
        font-weight: normal;
        border: 1px solid #f3941f;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        width: auto !important;
        float: right;
        height: auto !important;
    }


}
@media (min-width:500px) and (max-width: 550px) {

    .login-form {
        width: 150px !important;
        margin: 0 auto;
        padding: 100px 0 30px;		
        color: #7a7a7a;
        border-radius: 25px;
        margin-bottom: 15px;
        font-size: 13px;
        background: transparent;
        border: solid #f3941f 0.8px;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
        padding: 30px;	
        position: relative;
    }
    .login-form h2 {
        font-size: 17px;
        margin: 35px 0 25px;
    }
    .buttonLogin {
        outline: none;
        border-radius: 10px !important;
        -webkit-border-radius: 10px !important;
        -moz-border-radius: 10px !important;
        font-size: 13px;
        font-family: 'robotoregular';
        color: #fff;
        text-shadow: none;
        position: relative;
        background-color: #f3941f;
        font-weight: normal;
        border: 1px solid #f3941f;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        width: auto !important;
        float: right;
        height: auto !important;
    }

    .ui-menu .ui-menuitem .ui-menuitem-link .ui-icon-triangle-1-e {
        background-image: url(/PUSP2018-war/f/javax.faces.resource/images/rightarrow-navy.svg?ln=primefaces-modena);
        background-position: center !important;
        background-repeat: no-repeat;
        background-size: 100%;
    }
    .ui-menu .ui-menu-parent .ui-menu-child {
        display: none;
        width: 100%;
        padding: .3em;
        position: absolute;
        margin: 0;
        outline: 0;
        line-height: 0.5 !important;
        text-decoration: none;
        font-size: 100%;
        list-style: none;
    }
    .ui-menu {
        background-color: #ffffff;
        color: #546e7a;
        border-radius: 2px;
        padding: 0px !important;
        font-family: 'robotoregular';
        -webkit-box-shadow: 0px 1px 2px 0px rgba(43, 59, 93, 0.3);
        -moz-box-shadow: 0px 1px 2px 0px rgba(43, 59, 93, 0.3);
        box-shadow: 0px 1px 2px 0px rgba(43, 59, 93, 0.3);
    }
    .TitreActualite{
        color: #009560;
        font-weight: bold;
        font-size: 16px !important
    }

    .Imageclassesvc{
        max-width: 100%; height: 70px; display: block;
    }

    .blocConnectIMG{
        z-index: 20000; top: -3px; right: 15%; width: 20%
    }
    .blocConnectBTN{
        z-index: 20020; top: 9px; right: -23%; width: 45%
    }
    .blocConnectIconLOg{
        z-index: 20020; top: 8px; right: 15%; width: 12%
    }

    .ImageLogin{
        height:40px; width: 190px; 
    }

    .taillePetitMenu{
        font-size:14px !important;
    }
    .blocLogin{

        width: auto; z-index: 20000
    }
    .btnconnection{
        background-color:transparent; color: #FFF;
        border-color: transparent;
        font-family: 'robotolight';
        font-style: normal;
        font-weight: bold;
        font-size: 14px; width: auto
    }
    .btnDeconecter{
        background-color:transparent; color: #FFF;
        border-color: transparent;font-family: 'robotolight';
        font-style: normal;
        font-weight: bold;
        font-size: 14px; width: auto
    }

    .ImageLogo{
        height: 70px; width: 150px; margin-left: 0%
    }
    .blocLogo{
        z-index: 1001;transform: skew(0deg);top : 0px; height: 70px;  left:  0
    }

    .Menufixe{
        width: 100%;
        height: 110px;
        position: fixed;
        z-index: 100;
        top: 0;
        background-color: #ffffff
    }

    .tailleEcriture{
        color: #FFF; font-weight: bold;font-size: 12px
    }
    .blocConnect1{
        z-index: 803;;border-bottom-left-radius: 10px ;top : 0px; height: 50px;  right: 2%;transform: skew(45deg);
        width: 52%;
    }
    .blocConnect11{
        transform: skew(-45deg); padding-left: 15px; width: 100%

    }

    .blocConnect2{
        border-top-left-radius: 15px ;border-bottom-left-radius: 25px ; z-index: 802;top : 0px; height: 50px;  right: 0;
        width: 50%
    }

    .blocConnect21{
        width: 100%
    }

    .blocInfos{
        border-top-left-radius: 0px; top : 90px; height: 30px;  left:  0; z-index: 710; width: 100%
    }
    .blocInfos1{
        width: 100%; 
    }
    .blocInfos12{
        height: 100%; width: 30%
    }

    .blocOrange{
        top : 0; z-index: 900; transform: skew(20deg) ;  width: 48.7%;border-top-right-radius: 30px ; height: 50px;  left: 0px;
        background-color: #fff
    }
    .afficher{
        visibility: hidden;
        height: 0px;
    }

    .affichertype{
        visibility: visible;
        height: auto;
    }

    .afficheColor{
        background-color: #EEEEEE;
    }
    .TexAlRight{ text-align:center !important;}

    .pading5{
        padding: 5px;
    }

    .positionNormal{
        position: static;
    }

    .height0{
        height: 0px
    }

    .menutel{
        margin-left: 3px;
        height: 20px;
        width: 30px
    }
    .blocMenuTel{
        z-index:20 ;top : 28px; height: 45px;  right: 10%; width: 10%
    }

    .btnMenu {
        outline: none;
        border-radius: 2px !important;
        -webkit-border-radius: 2px !important;
        -moz-border-radius: 2px !important;
        font-size: 13px;
        font-family: 'robotoregular';
        color: #009E60;
        text-shadow: none;
        position: relative;
        background: linear-gradient(top, #01701b 20%, #ffffff 20%, #ffffff 40%, #01701b 40%, #01701b 60%, #01701b 60%, #ffffff 80%, #01701b 80%, #01701b 100%, #01701b 100%);

        font-weight: normal;
        border: none;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
    .btnMenu:hover{
        background: linear-gradient(top, #01701b 20%, #ffffff 20%, #ffffff 40%, #01701b 40%, #01701b 60%, #ffffff 60%, #ffffff 80%, #01701b 80%, #01701b 100%, #01701b 100%);

        color: #FFF;
    }
    .btnMenu:focus {
        -webkit-box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
        -moz-box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
        box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
        background: linear-gradient(top, #01701b 20%, #ffffff 20%, #ffffff 40%, #01701b 40%, #01701b 60%, #ffffff 60%, #ffffff 80%, #01701b 80%, #01701b 100%, #01701b 100%)

    }


}

@media (min-width:400px) and (max-width: 500px) {
    .dialogue{
        height:200px; 
    }

    .login-form {
        width: 150px !important;
        margin: 0 auto;
        padding: 100px 0 30px;		
        color: #7a7a7a;
        border-radius: 25px;
        margin-bottom: 15px;
        font-size: 13px;
        background: transparent;
        border: solid #f3941f 0.8px;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
        padding: 30px;	
        position: relative;
    }
    .login-form h2 {
        font-size: 17px;
        margin: 35px 0 25px;
    }
    .buttonLogin {
        outline: none;
        border-radius: 10px !important;
        -webkit-border-radius: 10px !important;
        -moz-border-radius: 10px !important;
        font-size: 13px;
        font-family: 'robotoregular';
        color: #fff;
        text-shadow: none;
        position: relative;
        background-color: #f3941f;
        font-weight: normal;
        border: 1px solid #f3941f;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        width: auto !important;
        float: right;
        height: auto !important;
    }

    .ui-menu .ui-menuitem .ui-menuitem-link .ui-icon-triangle-1-e {
        background-image: url(/PUSP2018-war/f/javax.faces.resource/images/rightarrow-navy.svg?ln=primefaces-modena);
        background-position: center !important;
        background-repeat: no-repeat;
        background-size: 100%;
    }

    .ui-menu .ui-menu-parent .ui-menu-child {
        display: none;
        width: 100%;
        padding: .3em;
        position: absolute;
        margin: 0;
        outline: 0;
        line-height: 0.5 !important;
        text-decoration: none;
        font-size: 100%;
        list-style: none;
    }
    .ui-menu {
        background-color: #ffffff;
        color: #546e7a;
        border-radius: 2px;
        padding: 0px !important;
        font-family: 'robotoregular';
        -webkit-box-shadow: 0px 1px 2px 0px rgba(43, 59, 93, 0.3);
        -moz-box-shadow: 0px 1px 2px 0px rgba(43, 59, 93, 0.3);
        box-shadow: 0px 1px 2px 0px rgba(43, 59, 93, 0.3);
    }
    .blocConnectIMG{
        z-index: 20000; top: -3px; right: 17%; width: 20%
    }
    .blocConnectBTN{
        z-index: 20020; top: 8px; right: -22%; width: 45%
    }
    .blocConnectIconLOg{
        z-index: 20020; top: 8px; right: 17%; width: 12%
    }

    .ImageLogin{
        height:40px; width: 190px; 
    }


    .blocLogin{

        width: auto; z-index: 20000
    }
    .btnconnection{
        background-color:transparent; color: #FFF;
        border-color: transparent;
        font-family: 'robotolight';
        font-style: normal;
        font-weight: bold;
        font-size: 14px; width: auto
    }
    .btnDeconecter{
        background-color:transparent; color: #FFF;
        border-color: transparent;font-family: 'robotolight';
        font-style: normal;
        font-weight: bold;
        font-size: 14px; width: auto
    }

    .ImageLogo{
        height: 70px; width: 150px; margin-left: 0%
    }
    .blocLogo{
        z-index: 1001;transform: skew(0deg);top : 0px; height: 70px;  left:  0
    }

    .Menufixe{
        width: 100%;
        height: 110px;
        position: fixed;
        z-index: 100;
        top: 0;
        background-color: #ffffff
    }

    .tailleEcriture{
        color: #FFF; font-weight: bold;font-size: 12px
    }
    .blocConnect1{
        z-index: 803;;border-bottom-left-radius: 10px ;top : 0px; height: 50px;  right: 2%;transform: skew(45deg);
        width: 52%;
    }
    .blocConnect11{
        transform: skew(-45deg); padding-left: 15px; width: 100%

    }

    .blocConnect2{
        border-top-left-radius: 15px ;border-bottom-left-radius: 25px ; z-index: 802;top : 0px; height: 50px;  right: 0;
        width: 50%
    }

    .blocConnect21{
        width: 100%
    }

    .blocInfos{
        border-top-left-radius: 0px; top : 90px; height: 30px;  left:  0; z-index: 710; width: 100%
    }
    .blocInfos1{
        width: 100%; 
    }
    .blocInfos12{
        height: 100%; width: 30%
    }

    .blocOrange{
        top : 0; z-index: 900; transform: skew(20deg) ;  width: 48.7%;border-top-right-radius: 30px ; height: 50px;  left: 0px;
        background-color: #fff
    }
    .afficher{
        visibility: hidden;
        height: 0px;
    }

    .affichertype{
        visibility: visible;
        height: auto;
    }

    .afficheColor{
        background-color: #EEEEEE;
    }
    .TexAlRight{ text-align:center !important;}

    .pading5{
        padding: 5px;
    }

    .positionNormal{
        position: static;
    }

    .height0{
        height: 0px
    }

    .menutel{
        margin-left: 3px;
        height: 20px;
        width: 30px
    }
    .blocMenuTel{
        z-index:20 ;top : 27px; height: 50px;  right: 10%; width: 10%
    }

    .btnMenu {
        outline: none;
        border-radius: 2px !important;
        -webkit-border-radius: 2px !important;
        -moz-border-radius: 2px !important;
        font-size: 13px;
        font-family: 'robotoregular';
        color: #009E60;
        text-shadow: none;
        position: relative;
        background: linear-gradient(top, #01701b 20%, #ffffff 20%, #ffffff 40%, #01701b 40%, #01701b 60%, #01701b 60%, #ffffff 80%, #01701b 80%, #01701b 100%, #01701b 100%);

        font-weight: normal;
        border: none;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
    .btnMenu:hover{
        background: linear-gradient(top, #01701b 20%, #ffffff 20%, #ffffff 40%, #01701b 40%, #01701b 60%, #ffffff 60%, #ffffff 80%, #01701b 80%, #01701b 100%, #01701b 100%);

        color: #FFF;
    }
    .btnMenu:focus {
        -webkit-box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
        -moz-box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
        box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
        background: linear-gradient(top, #01701b 20%, #ffffff 20%, #ffffff 40%, #01701b 40%, #01701b 60%, #ffffff 60%, #ffffff 80%, #01701b 80%, #01701b 100%, #01701b 100%)

    }

    .PourPetitMenu {
        width: 75% !important;
        padding: .2em;
        position: relative;
        outline: 0 none;
    }

    .PourMap{
        width:100%; height:500px; z-index:1;
    }
    .Imageclassesvc{
        max-width: 100%; height: 60px; display: block;
    }

    .TitreActualite{
        color: #009560;
        font-weight: bold;
        font-size: 18px !important
    }


}

@media (min-width:300px) and (max-width: 400px) {
    .dialogue{
        height:400px !important; 
        width: 100% !important;
        overflow-y: auto;
    }

    .login-form {
        width: 150px !important;
        margin: 0 auto;
        padding: 100px 0 30px;		
        color: #7a7a7a;
        border-radius: 25px;
        margin-bottom: 15px;
        font-size: 13px;
        background: transparent;
        border: solid #f3941f 0.8px;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
        padding: 30px;	
        position: relative;
    }
    .login-form h2 {
        font-size: 17px;
        margin: 35px 0 25px;
    }
    .buttonLogin {
        outline: none;
        border-radius: 10px !important;
        -webkit-border-radius: 10px !important;
        -moz-border-radius: 10px !important;
        font-size: 13px;
        font-family: 'robotoregular';
        color: #fff;
        text-shadow: none;
        position: relative;
        background-color: #f3941f;
        font-weight: normal;
        border: 1px solid #f3941f;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        width: auto !important;
        float: right;
        height: auto !important;
    }

    .ImageCallCenter{
        height: 190px; width: 100%
    }

    .ui-menu .ui-menuitem .ui-menuitem-link .ui-icon-triangle-1-e {
        background-image: url(/PUSP2018-war/f/javax.faces.resource/images/rightarrow-navy.svg?ln=primefaces-modena);
        background-position: center !important;
        background-repeat: no-repeat;
        background-size: 100%;
    }
    .ui-menu {
        background-color: #ffffff;
        color: #546e7a;
        border-radius: 2px;
        padding: 0px !important;
        font-family: 'robotoregular';
        -webkit-box-shadow: 0px 1px 2px 0px rgba(43, 59, 93, 0.3);
        -moz-box-shadow: 0px 1px 2px 0px rgba(43, 59, 93, 0.3);
        box-shadow: 0px 1px 2px 0px rgba(43, 59, 93, 0.3);
    }
    .ui-menu .ui-menu-parent .ui-menu-child {
        display: none;
        width: 100%;
        padding: .3em;
        position: absolute;
        margin: 0;
        outline: 0;
        line-height: 0.5 !important;
        text-decoration: none;
        font-size: 100%;
        list-style: none;
    }
    .blocConnectIMG{
        z-index: 20000; top: -3px; right: 22%; width: 25%
    }
    .blocConnectBTN{
        z-index: 20020; top: 8px; right: -16%; width: 45%
    }
    .blocConnectIconLOg{
        z-index: 20020; top: 5px; right: 25%; width: 12%
    }

    .ImageLogin{
        height:40px; width: 190px; 
    }


    .blocLogin{

        width: auto; z-index: 20000
    }
    .btnconnection{
        background-color:transparent; color: #FFF;
        border-color: transparent;
        font-family: 'robotolight';
        font-style: normal;
        font-weight: bold;
        font-size: 14px; width: auto
    }
    .btnDeconecter{
        background-color:transparent; color: #FFF;
        border-color: transparent;font-family: 'robotolight';
        font-style: normal;
        font-weight: bold;
        font-size: 14px; width: auto
    }

    .ImageLogo{
        height: 70px; width: 150px; margin-left: 0%
    }
    .blocLogo{
        z-index: 1001;transform: skew(0deg);top : 0px; height: 70px;  left:  0
    }

    .Menufixe{
        width: 100%;
        height: 110px;
        position: fixed;
        z-index: 100;
        top: 0;
        background-color: #ffffff
    }

    .tailleEcriture{
        color: #FFF; font-weight: bold;font-size: 12px
    }
    .tailleEcrituretext{
        font-weight: normal;font-size: 12px
    }
    .blocConnect1{
        z-index: 803;;border-bottom-left-radius: 10px ;top : 0px; height: 50px;  right: 2%;transform: skew(45deg);
        width: 52%;
    }
    .blocConnect11{
        transform: skew(-45deg); padding-left: 15px; width: 100%

    }

    .blocConnect2{
        border-top-left-radius: 15px ;border-bottom-left-radius: 25px ; z-index: 802;top : 0px; height: 50px;  right: 0;
        width: 50%
    }

    .blocConnect21{
        width: 100%
    }

    .blocInfos{
        border-top-left-radius: 0px; top : 90px; height: 30px;  left:  0; z-index: 710; width: 100%
    }
    .blocInfos1{
        width: 100%; padding-top: 4px;
    }

    .blocInfos12{
        height: 100%; width: 30%
    }

    .blocOrange{
        top : 0; z-index: 900; transform: skew(20deg) ;  width: 48.7%;border-top-right-radius: 30px ; height: 50px;  left: 0px;
        background-color: #fff
    }
    .afficher{
        visibility: hidden;
        height: 0px;
    }

    .affichertype{
        visibility: visible;
        height: auto;
    }

    .afficheColor{
        background-color: #EEEEEE;
    }
    .TexAlRight{ text-align:center !important;}

    .pading5{
        padding: 5px;
    }

    .positionNormal{
        position: static;
    }

    .height0{
        height: 0px
    }

    .menutel{
        margin-left: 3px;
        height: 20px;
        width: 30px
    }
    .blocMenuTel{
        z-index:20 ;top : 27px; height: 50px;  right: 10%; width: 10%
    }

    .btnMenu {
        outline: none;
        border-radius: 2px !important;
        -webkit-border-radius: 2px !important;
        -moz-border-radius: 2px !important;
        font-size: 13px;
        font-family: 'robotoregular';
        color: #009E60;
        text-shadow: none;
        position: relative;
        background: linear-gradient(top, #01701b 20%, #ffffff 20%, #ffffff 40%, #01701b 40%, #01701b 60%, #01701b 60%, #ffffff 80%, #01701b 80%, #01701b 100%, #01701b 100%);

        font-weight: normal;
        border: none;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
    .btnMenu:hover{
        background: linear-gradient(top, #01701b 20%, #ffffff 20%, #ffffff 40%, #01701b 40%, #01701b 60%, #ffffff 60%, #ffffff 80%, #01701b 80%, #01701b 100%, #01701b 100%);

        color: #FFF;
    }
    .btnMenu:focus {
        -webkit-box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
        -moz-box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
        box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
        background: linear-gradient(top, #01701b 20%, #ffffff 20%, #ffffff 40%, #01701b 40%, #01701b 60%, #ffffff 60%, #ffffff 80%, #01701b 80%, #01701b 100%, #01701b 100%)

    }

    .PourPetitMenu {
        width: 75% !important;
        padding: .2em;
        position: relative;
        outline: 0 none;
    }
    .PourMap{
        width:100%; height:500px; z-index:1;
    }

    .TitreAttribut
    {
        color: #000000;
        font-size: 12px;
    }

    .TitreActualite{
        color: #009560;
        font-weight: bold;
        font-size: 16px !important
    }

    .Imageclassesvc{
        max-width: 100%; height: 60px; display: block;
    }



}


@media (min-width:0px) and (max-width: 300px) {
    .dialogue{
        height:200px; 
    }

    .login-form {
        width: 150px !important;
        margin: 0 auto;
        padding: 100px 0 30px;		
        color: #7a7a7a;
        border-radius: 25px;
        margin-bottom: 15px;
        font-size: 13px;
        background: transparent;
        border: solid #f3941f 0.8px;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
        padding: 30px;	
        position: relative;
    }
    .login-form h2 {
        font-size: 17px;
        margin: 35px 0 25px;
    }
    .buttonLogin {
        outline: none;
        border-radius: 10px !important;
        -webkit-border-radius: 10px !important;
        -moz-border-radius: 10px !important;
        font-size: 13px;
        font-family: 'robotoregular';
        color: #fff;
        text-shadow: none;
        position: relative;
        background-color: #f3941f;
        font-weight: normal;
        border: 1px solid #f3941f;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        width: auto !important;
        float: right;
        height: auto !important;
    }

    .blocConnectIMG{
        z-index: 20000; top: -3px; right: 30%; width: 20%
    }
    .blocConnectBTN{
        z-index: 20020; top: 8px; right: -16%; width: 45%
    }
    .blocConnectIconLOg{
        z-index: 20020; top: 8px; right: 25%; width: 12%
    }

    .ImageLogin{
        height:40px; width: 210px; 
    }


    .blocLogin{

        width: auto; z-index: 20000
    }
    .btnconnection{
        background-color:transparent; color: #FFF;
        border-color: transparent;
        font-family: 'robotolight';
        font-style: normal;
        font-weight: bold;
        font-size: 12px; width: auto
    }
    .btnDeconecter{
        background-color:transparent; color: #FFF;
        border-color: transparent;font-family: 'robotolight';
        font-style: normal;
        font-weight: bold;
        font-size: 12px; width: auto
    }

    .ImageLogo{
        height: 70px; width: 150px; margin-left: 0%
    }
    .blocLogo{
        z-index: 1001;transform: skew(0deg);top : 0px; height: 70px;  left:  0
    }

    .Menufixe{
        width: 100%;
        height: 110px;
        position: fixed;
        z-index: 100;
        top: 0;
        background-color: #ffffff
    }

    .tailleEcriture{
        color: #FFF; font-weight: bold;font-size: 12px
    }
    .tailleEcrituretext{
        font-weight: normal;font-size: 12px
    }
    .blocConnect1{
        z-index: 803;;border-bottom-left-radius: 10px ;top : 0px; height: 50px;  right: 2%;transform: skew(45deg);
        width: 52%;
    }
    .blocConnect11{
        transform: skew(-45deg); padding-left: 15px; width: 100%

    }

    .blocConnect2{
        border-top-left-radius: 15px ;border-bottom-left-radius: 25px ; z-index: 802;top : 0px; height: 50px;  right: 0;
        width: 50%
    }

    .blocConnect21{
        width: 100%
    }

    .blocInfos{
        border-top-left-radius: 0px; top : 90px; height: 30px;  left:  0; z-index: 710; width: 100%
    }
    .blocInfos1{
        width: 100%; padding-top: 4px;
    }

    .blocInfos12{
        height: 100%; width: 30%
    }

    .blocOrange{
        top : 0; z-index: 900; transform: skew(20deg) ;  width: 48.7%;border-top-right-radius: 30px ; height: 50px;  left: 0px;
        background-color: #fff
    }
    .afficher{
        visibility: hidden;
        height: 0px;
    }

    .affichertype{
        visibility: visible;
        height: auto;
    }

    .afficheColor{
        background-color: #EEEEEE;
    }
    .TexAlRight{ text-align:center !important;}

    .pading5{
        padding: 5px;
    }

    .positionNormal{
        position: static;
    }

    .height0{
        height: 0px
    }

    .menutel{
        margin-left: 3px;
        height: 20px;
        width: 30px
    }
    .blocMenuTel{
        z-index:20 ;top : 27px; height: 50px;  right: 10%; width: 10%
    }

    .btnMenu {
        outline: none;
        border-radius: 2px !important;
        -webkit-border-radius: 2px !important;
        -moz-border-radius: 2px !important;
        font-size: 13px;
        font-family: 'robotoregular';
        color: #009E60;
        text-shadow: none;
        position: relative;
        background: linear-gradient(top, #01701b 20%, #ffffff 20%, #ffffff 40%, #01701b 40%, #01701b 60%, #01701b 60%, #ffffff 80%, #01701b 80%, #01701b 100%, #01701b 100%);

        font-weight: normal;
        border: none;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
    .btnMenu:hover{
        background: linear-gradient(top, #01701b 20%, #ffffff 20%, #ffffff 40%, #01701b 40%, #01701b 60%, #ffffff 60%, #ffffff 80%, #01701b 80%, #01701b 100%, #01701b 100%);

        color: #FFF;
    }
    .btnMenu:focus {
        -webkit-box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
        -moz-box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
        box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.7) !important;
        background: linear-gradient(top, #01701b 20%, #ffffff 20%, #ffffff 40%, #01701b 40%, #01701b 60%, #ffffff 60%, #ffffff 80%, #01701b 80%, #01701b 100%, #01701b 100%)

    }

    .PourPetitMenu {
        width: 90% !important;
        padding: .2em;
        position: relative;
        outline: 0 none;
        font-size: 12px
    }
    .PourMap{
        width:100%; height:500px; z-index:1;
    }

    .TitreAttribut
    {
        color: #000000;
        font-size: 12px;
    }

    .TitreActualite{
        color: #009560;
        font-weight: bold;
        font-size: 16px !important
    }

    .Imageclassesvc{
        max-width: 100%; height: 60px; display: block;
    }



}




/**
 ** END DAOUDA
 **/