@import url('responsive.css');


.clearFix{
    clear: both;
}
.fait{
    background: green!important;
}

@font-face {
  font-family: 'Eurostile';
  src: url(../fonts/Eurostile);
  font-weight: bold;
}



html,
body {
    width: 100%;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #000;
    background: #FFF;

}


/* LINKS */

a {
    outline: 0;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}



/* H GROUP */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Michroma', sans-serif;
    font-weight: normal;
    margin: 0;
    line-height: normal;
}

h1 {
    font-size: 25px;
    padding: 0 0 20px 0;
    color: #000;
    text-align: left;
}

h2 {
    font-size: 25px;
    padding: 0;
}

h3 {
    font-size: 16px;
    padding: 0;
}

h4 {
    font-size: 13px;
    color: #fff;
    padding: 0 0 20px 0;
    text-align: center;
    text-transform: uppercase;
}

.font-michroma{
    font-family: 'Michroma', sans-serif;
}



.clearfix {
    clear: both;
}

.container {
    /*    max-width: 960px;*/
    width: 960px;
    /*    border: 1px solid;*/
}

.img-responsive {
    margin: auto;
}

p {
    margin: 0;
}

.color-text-gold{
    color: #bf9d39;
}


.content{
    min-height: 100vh;
    display: flex;
    flex-flow: column;
}
main{
    flex-grow: 1
}

/* HEADER
-----------*/


/* HEADER
-------------------------------------------------------------- */

header {
    height: 250px;
}

header .container {
    background: url(../img/header_deco.png) top repeat-x;
    height: inherit;
    position: relative;
    padding: 0;
}

#rappel .btn {
    cursor: pointer;
    display: block;
    float: left;
    width: 220px;
    height: 40px;
    font-size: 13px;
    color: #02528b;
    text-decoration: none;
    background: rgba(255, 255, 255, 0);
    padding: 0;
}

#rappel .btn span {
    font-family: 'Michroma', sans-serif;
}

#rappel .btn div {
    background: #02528b;
    display: block;
    font-size: 11px;
    color: #fff;
    font-weight: bold;
    padding: 3px 10px;
    margin: 0 0 0 15px;
    text-transform: uppercase;
    width: 187px;
    text-align: center;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}

#rappel:hover .btn div,
#devis:hover .btn {
    background: #bf9d39;
}

#devis .btn {
    cursor: pointer;
    display: block;
    float: right;
    width: 130px;
    height: 46px;
    border-left: 1px solid #bf9d39;
    border-right: 1px solid #bf9d39;
    border-bottom: 1px solid #bf9d39;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    padding: 0;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}

#devis:hover .btn .devis-icon,
#devis:hover .btn .devis-text {
    color: #FFF;
}

.devis-icon {
    float: left;
    padding: 5px 10px 0 18px;
    color: #bf9d39;
    font-size: 25px;
}

.devis-text {
    float: left;
    padding: 7px 0 0 0;
    color: #bf9d39;
    font-size: 11px;
    text-transform: uppercase;
}

header .logo-header{
    width: 60%;
    margin-top: 2%

}



/* Navigation
---------------------*/
.navbar{
    margin:0;
    min-height: 0;
    border-radius: 0;
    border: none;
}
.navbar-default{
    background: #484a4b;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}
.navbar-default .navbar-toggle:active .icon-bar, .navbar-default .navbar-toggle:hover .icon-bar {
    background-color: #484A4B;
}


.navbar-default .navbar-nav>li>a {
    color: #fff;
    font-size: 13px;
    font-family: 'Michroma', sans-serif;


}

.navbar-default .navbar-nav>li>a:hover {
    background: #fff;
    color: #484a4b;
    /*
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    */
}

.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #fff;
    background: #484a4b;
    white-space: nowrap;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 0; 
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #484a4b; 
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 0px solid #ccc; 
    border: 0px solid rgba(0,0,0,.15); 
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0); 
    box-shadow: 0 6px 12px rgba(0,0,0,0); 
}

.nav>li>a {
    padding: 10px 14px;

}


.navbar-default .navbar-collapse {
    margin: 0 8%;
}

/*.navbar-default .navbar-nav>li>a:focus {
     color: #fff; 
}*/
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    color: #333;
    background-color: #fff;
}
.navbar-nav .open a:hover{
    
}
.navbar-toggle {
    position: relative;
    float: right;
    padding: 6px 6px;
    margin-top: 5px;
    margin-right: 15px;
    margin-bottom: 5px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

nav .submenu-responsive{
    display: none
}

/*********************

    INDEX.PHP

**********************/

/* Banniere
---------------------*/

#banniere {
    margin-top: 5px;
    position: relative
}

#banniere .container-fluid {
    padding: 0;
    position: relative;
    /*min-height: 650px;*/
    background:  linear-gradient(to right, #67E7F9 25%, #4FB7DA 40%, #09528B);
/*    background:  url("img_bannn.png") no-repeat left center ,linear-gradient(to right, #67E7F9 25%, #4FB7DA 40%, #09528B) ;
*/    
}

#banniere .banniere-img-fond{
    position: relative;
}

/*#banniere .col-droite{
    position: absolute;
    top: 32%;
    right: 20%;
    width: 100%;
    opacity: 0.9;
}*/

 .banniere_bis{
    display: flex;
    flex-flow: column;
    align-items: center;
    min-height: 230px;
    position: absolute;
    right: 0%;
    top: 15%;
}

.block-description-banniere{
    width: 25%;
    min-width: 640px;
    font-size: 20px;
    background-color: #09528B;
    padding: 30px 50px;
    color: white;
    font-size: 15px;
    border-radius: 20px;
    border: 5px solid #fff;
}

#banniere .banniere-img img{
    margin: 5px 0 ;
    border-radius: 20px
}

#banniere .block-description-banniere .p-first{
    font-size: 22px;
}

#banniere .block-description-banniere .ligne-banniere{
    margin: 10px auto;
    border:0.5px solid #c9ab4c;
    width: 65%;
    max-width: 260px
}

#banniere .block-description-banniere p span {
    font-weight: bold;
    color: #c9ab4c;
}
#banniere .block-description-banniere p {
    margin: 10px 0
}

#banniere .img-banniere {
    min-height: 230px;
    float: left
    /*height: 650px;*/
/*    width: 100%;*/
    /*position: absolute;*/
    /*left: -600px;*/
}

#banniere .img-banniere .img-responsive{
    float:left;
    min-height: 200px
}

#banniere .text-banniere {
    float: right;
}


#banniere .col-gauche{
    width: 60%
}


@media only screen and (max-width: 1750px)
{
    #banniere .col-gauche {
        width: 50%;
    }
}
@media only screen and (max-width: 1663px) {
   
   
    .banniere_bis {
        right: -8%;
        top: 5%;
    }

}

@media only screen and (max-width: 1488px) {
   
    #banniere .col-gauche{
        width: 50%
    }

    .banniere_bis {
        display: unset;
        right: 0%;
        top: 10%;
        margin-right: 15px
    }

}

@media only screen and (min-width: 1300px) and (max-width: 1488px){
   
    #banniere .block-description-banniere {
         padding: 15px 50px; 
    }
}


/* Bienvenue
-------------------------*/

#bienvenue {
    text-align: justify;
    padding-top: 30px
}

#bienvenue .container .row .col-md-8,
#bienvenue .col-md-8 h2 {
    color: #02538b;
}


#bienvenue .p-bienvenue{
    margin: 120px 0 0   
}
#bienvenue .col-md-8 p span {
    color: #c9ab4c;
    font-weight: bold;
}

#bienvenue .col-md-8 p {
    width: 100%;
}


/* Produit
---------------------------*/

#produit {
    padding: 30px 0;
    background: url(../img/bg-bleu.png) repeat;
}

#produit .col-md-4 {
    /*    border: 1px solid;*/
}

#produit .col-md-4:nth-child(1) {
    padding-left: 0;
    padding-right: 30px;
}

#produit .col-md-4:nth-child(2) {
    padding: 0 15px;
}

#produit .col-md-4:nth-child(3) {
    padding-right: 0;
    padding-left: 30px
}

#produit .game {
    background: #fff;
    padding: 30px 10px;
    margin: 15px 0;
    border-radius: 20px;
    color: #02528b;
    min-height: 590px;
    max-height: 610px

}

#produit .game .img-responsive {
    margin: auto;
}

#produit h3 {
    color: #c9ab4c;
    margin-bottom: 20px;
    letter-spacing: 1px
}

#produit .btn {
    width: 65%;
    border: transparent;
    border-radius: 50px;
}

#produit .btn-default {
    background: #c9ab4c;
    color: #fff;
    transition: background 0.3s
}

#produit .btn-default:hover {
    background: #02528b;
}


#produit .index_description {
    padding: 20px 10px 0;
}

#produit .telephone .description {
    padding: 20px 10px;
}


#produit .telephone img {
        width: 265px;
    }
#produit .imprimante img {
        width: 240px;
    }
    #produit .camera img {
        width: 225px;
    }

/*Caroussel
-------------------*/



#caroussel .multiple-items {
    margin: 50px auto;
}



#caroussel .multiple-items div img {
    width: 60%;
}

#caroussel .logo{
    opacity: 0.5;
}

#caroussel .logo:hover{
    opacity: 1
}


/*Temoignage
--------------------------*/

#temoignage {
    padding: 30px 0;
    background: url(../img/bg-jaune.png) repeat ;
    background-size: 100%
}

#temoignage h2 {
    color: #fff;
    text-align: center;
    margin: 0 0 20px;
}
#temoignage .contenu-temoignage{
    /*    border: 1px solid;*/
    text-align: justify;
}

#temoignage .container{
    margin-bottom: 30px       
}

#temoignage .row{
    margin: 0;
    position: relative;
}

#temoignage .img-temoignage{
    float: left
}
#temoignage .img-temoignage, #temoignage .img-temoignage img{
    border-radius: 50%;
}


#temoignage .img-temoignage{
    position: absolute;
    left: 0;
    z-index: 10;
}

#temoignage .img-temoignage, #temoignage .p-temoignage {
    padding: 5px;
    background: #fff;


}

#temoignage .p-temoignage{
    margin: 15px 0;
    border-radius: 10px;
    padding: 25px 30px 30px;
    min-height: 281px;
    float: right;
}

#temoignage .p-temoignage .content-temoignage{
    width: 80%;
    float: right;
}

#temoignage .p-temoignage h3{
    font-size: 20px;
    color: #02538b;
    margin-top: 20px;
    margin-bottom: 0;
    font-weight: bold;
    font-family: sans-serif
}

#temoignage .p-temoignage h4{
    font-size: 15px;
    color: #bca14c;
    padding: 0;
    margin: 5px 0;
    text-align: justify;
    text-transform: uppercase;
    font-family: sans-serif;
    display: inline
}
#temoignage .p-temoignage p{
    color: #00518d;
    padding: 15px 0
}

#temoignage .slick-prev:before, #temoignage .slick-next:before {
    font-size: 20px;
    position: absolute;
}
.slick-prev {
    left: -15px;
}
.slick-next {
    right: -15px;
}

#temoignage .slick-prev:before{
    left: -15px;
}
#temoignage .slick-next:before {
    right: -15px
}

.class-meilleurtaux{
    color:#bca14c;
    text-decoration: underline;
}
.class-meilleurtaux:hover{
    color:#bca14c;
}


/*FOOTER
----------------------*/

footer .social-icons{
    width: 100%;
    margin: 20px auto ;
}
footer .social-icons a{

}
footer .social-icons a img{
    margin: 0 5px;
    width: 25px;
}

footer h6{
    font-family: sans-serif;
    font-size: 12px;
    margin-bottom: 10px
}

footer .partenaire-img{
    display: inline-block;    
    width: 150px;
    height: 50px;
    margin: 0 5px;
}


footer .partenaires-icons .col-md-6{
    margin: 0;
    padding: 0;
}

footer .partenaire{
    width: 23%;
    display: inline-block;
    margin: 0px 1%;
}

footer .block-partenaire_1,.block-partenaire_2{
    display: inline-block;
    width: 50%;
}


footer .copyright{
    margin-top: 10px;
    padding-top: 10px;
    border: 0;
    border-top: 2px solid #00518d;
    font-size: 11px
}

footer .signature {
    float: right;
    
}

footer .signature img{
    margin-right:0;
    width: 175px

}

footer .bloctext-footer{
    display:inline-block;
}

 .bas-de-page{
    position: absolute;
    bottom: 0;
    width: 100%
}
/******************

    SERVICES.PHP 

*******************/

.main-page{
    padding-top: 60px ;
    background: url(../banniere/background-blanc-avec-puces.png);
    background-position: top center;
    /* background-repeat: no-repeat; */
    background-size: 95%;
}
.services-section{
    font-size: 14px;
    text-align: justify;
    color: #02538b;
}

.services-section .container div{
    margin: 40px 0 50px
}
.services-section .container div ul{
    padding: 0 15px
}

.main-page .services-section .container div p{
    font-family: 'arial', sans-serif;
    color: #02538b;
    font-size: 16px;
    margin: 30px 0
}

/******************

    - LOCATION-STANDARD-TELEPHONIQUE.PHP
    - INSTALLATION-STANDARD-TELEPHONIQUE.PHP 
    - RECRUTEMENT.PHP
    - SOLUTION-IMPRESSION.PHP
    - SOLUTION-COMMUNICATIONS-UNIFIEES.PHP

*******************/

.main-page section .container div{
    margin: 30px 0
}

.encadre-gold{
    border:1px solid #bf9d39;
    border-radius: 10px;
    text-align: center;
}
.main-page .services-section .container div .encadre-gold p{
    padding: 10px 24px;
    margin: 0;
    font-size: 18px
}

.main-page .services-section .container div div .liste-fonctionnalites{
    padding: 0px 50px;
    margin: 0;
    font-size: 14px;
    text-align: center
   
}
/******************

    RECRUTEMENT.PHP 

*******************/

.main-page section .container div h3{
    font-family: 'arial', sans-serif;
    font-weight: bold;
    font-size: 18px;

}


/******************

    PRESENTATION

******************/


.gold {
    color: #bf9d39;
    font-weight: bold;
}
section.second_pres {
    width: 100%;
    background: #02528b url(../img/yellow_deco.jpg) top center repeat-x;
    height: 70px;
}

ul#zone_plus {
    list-style: none;
    text-decoration: none;
}
ul#zone_plus li {
    float: left;
    position: relative;
    display: inline-block;
    width: 165px;
    height: 70px;
}
ul#zone_plus li:nth-child(2) {
    width: 130px;
}
ul#zone_plus li:nth-child(3) {
    width: 130px;
}
ul#zone_plus li a {
    font-family: Arial, sans-serif;
    font-weight: bold;
    display: block;
    font-size: 16px;
    height: 70px;
    padding: 15px 0 10px 40px;
    vertical-align: middle;
    text-decoration: none;
    color: #FFF;
    background: url(../img/icon_plus.png) no-repeat 0 20px;
}

#main-recrutement .img-bloc{
    /*border: 1px solid;*/
    width: 50%;
    height: 240px;
    float: right;
  
}
#main-recrutement section .container .bloc-text-recrut{
    width: 50%;
    display: inline-block;
}




/*********/

/*PRESENTATION*/

/*********/


article.main {
    margin: 0 auto;
    width: 980px;
    padding: 30px 10px 30px 10px;
}


.container_zone_plus{
    height: 70px;
    width: 760px;
    margin: 0 auto;
}
ul#zone_plus{
    list-style: none;
    text-decoration: none;
}
ul#zone_plus li a{
    font-family: Arial, sans-serif;
    font-weight: bold;
    display: block;
    font-size:16px;
    height: 70px;
    padding: 15px 0 10px 40px;
    vertical-align: middle;
    text-decoration: none;
    color:#FFF;
    background: url(../img/icon_plus.png) no-repeat 0 20px;
}
ul#zone_plus li a span{
    display: block;
    height: 50px;
    vertical-align: middle;
    text-align: left
}

ul#zone_plus li {
    float:left;
    position:relative;
    display:inline-block;
    width: 165px;
    height: 70px;
}
ul#zone_plus li img{
    float: left;
    margin: 5px;
}
ul#zone_plus li:nth-child(2){
    width: 130px;
}
ul#zone_plus li:nth-child(3){
    width: 130px;
}
ul#zone_plus li:nth-child(3) a span{
    padding-top: 10px;
}


.col3 {
    width: 300px;
    margin: 0 10px 0 10px;
    float: left;
}

#titre {
    color: #fff;
}

article.second {
    margin: 0 auto;
    width: 980px;
    padding: 45px 10px 70px ;
}
.description {
    padding: 10px 10px 25px;
    font-size: 13px;
    text-align: center;
    height: 370px;
    color: #000;
}

.bloc-img-presentation{
    height: 230px;
    background-color: white;
    text-align: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}


section.second_second {
    width: 100%;
    background: url(../img/blue_deco.jpg) repeat-x scroll center top #02528B;
}
.greyblock {
    position: relative;
    z-index: 0;
    background: #e7e7e7;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    margin-bottom: 20px;
}
.btn_gamme_tel {
    border: 1px solid #eae1bd;
    color: #4b4b4b;
    font-size: 12px;
    font-weight: bold;
    -webkit-border-radius: 17px;
    -moz-border-radius: 17px;
    border-radius: 17px;
    height: 37px;
    bottom: -18px;
    left: 50%;
    margin-left: -103px;
    position: absolute;
    width: 206px;
    z-index: 1;
    background: #c6b260;
    background: -moz-linear-gradient(0deg, #c6b260 0%, #fff 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #c6b260), color-stop(100%, #fff));
    background: -webkit-linear-gradient(0deg, #c6b260 0%, #fff 100%);
    background: -o-linear-gradient(0deg, #c6b260 0%, #fff 100%);
    background: -ms-linear-gradient(0deg, #c6b260 0%, #fff 100%);
    background: linear-gradient(0deg, #c6b260 0%, #fff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c6b260", endColorstr="#fff", GradientType=1);
    -webkit-box-shadow: 0px 0px 0px 0px #000;
    -moz-box-shadow: 0px 0px 0px 0px #000;
    box-shadow: 0px 0px 0px 0px #000;
}
.btn_gamme_tel:hover {
    border: 1px solid #eae1bd;
    color: #FFFFFF;
    -webkit-border-radius: 17px;
    -moz-border-radius: 17px;
    border-radius: 17px;
    height: 37px;
    bottom: -18px;
    left: 50%;
    margin-left: -103px;
    position: absolute;
    width: 206px;
    z-index: 1;
    background: #e0cb76;
    background: #bca548;
    background: -moz-linear-gradient(top, #bca548 0%, #e0cb76 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bca548), color-stop(100%, #e0cb76));
    background: -webkit-linear-gradient(top, #bca548 0%, #e0cb76 100%);
    background: -o-linear-gradient(top, #bca548 0%, #e0cb76 100%);
    background: -ms-linear-gradient(top, #bca548 0%, #e0cb76 100%);
    background: linear-gradient(top, #bca548 0%, #e0cb76 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#bca548", endColorstr="#e0cb76", GradientType=0);
    -webkit-box-shadow: 0px 0px 0px 0px #000;
    -moz-box-shadow: 0px 0px 0px 0px #000;
    box-shadow: 0px 0px 0px 0px #000;
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.btn_gamme_tel a:hover{
    color: #FFFFFF;
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.btn_gamme_tel  a, .btn_gamme_imp a , .btn_gamme_surveillance a {
    color: #4b4b4b;
    text-decoration: none;

}

.btn_gamme_imp {
    border: 1px solid #cfcfcf;
    color: #4b4b4b;
    font-size: 12px;
    font-weight: bold;
    -webkit-border-radius: 17px;
    -moz-border-radius: 17px;
    border-radius: 17px;
    height: 37px;
    bottom: -18px;
    left: 50%;
    margin-left: -103px;
    position: absolute;
    width: 206px;
    z-index: 1;
    background: #a3a6a9;
    background: -moz-linear-gradient(0deg, #a3a6a9 0%, #fff 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #a3a6a9), color-stop(100%, #fff));
    background: -webkit-linear-gradient(0deg, #a3a6a9 0%, #fff 100%);
    background: -o-linear-gradient(0deg, #a3a6a9 0%, #fff 100%);
    background: -ms-linear-gradient(0deg, #a3a6a9 0%, #fff 100%);
    background: linear-gradient(0deg, #a3a6a9 0%, #fff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a3a6a9", endColorstr="#fff", GradientType=1);
    -webkit-box-shadow: 0px 0px 0px 0px #000;
    -moz-box-shadow: 0px 0px 0px 0px #000;
    box-shadow: 0px 0px 0px 0px #000;
}
.btn_gamme_imp:hover{
    border: 1px solid #cfcfcf;
    color: #FFFFFF;
    -webkit-border-radius: 17px;
    -moz-border-radius: 17px;
    border-radius: 17px;
    height: 37px;
    bottom: -18px;
    left: 50%;
    margin-left: -103px;
    position: absolute;
    width: 206px;
    z-index: 1;
    background: #cfcfcf;
    background: -moz-linear-gradient(0deg, #cfcfcf 0%, #a3a6a9 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #cfcfcf), color-stop(100%, #a3a6a9));
    background: -webkit-linear-gradient(0deg, #cfcfcf 0%, #a3a6a9 100%);
    background: -o-linear-gradient(0deg, #cfcfcf 0%, #a3a6a9 100%);
    background: -ms-linear-gradient(0deg, #cfcfcf 0%, #a3a6a9 100%);
    background: linear-gradient(0deg, #cfcfcf 0%, #a3a6a9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cfcfcf", endColorstr="#a3a6a9", GradientType=1);
    -webkit-box-shadow: 0px 0px 0px 0px #000;
    -moz-box-shadow: 0px 0px 0px 0px #000;
    box-shadow: 0px 0px 0px 0px #000;
        -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.btn_gamme_imp a:hover{
    color: #FFFFFF;
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.btn_gamme_surveillance {
    border: 1px solid #56B2E4;
    color: #4b4b4b;
    font-size: 12px;
    font-weight: bold;
    -webkit-border-radius: 17px;
    -moz-border-radius: 17px;
    border-radius: 17px;
    height: 37px;
    bottom: -18px;
    left: 50%;
    margin-left: -103px;
    position: absolute;
    width: 206px;
    z-index: 1;
    background: #9ed3f0;
    background: #9ed3f0;
    background: -moz-linear-gradient(top, #9ed3f0 0%, #1386c3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9ed3f0), color-stop(100%, #1386c3));
    background: -webkit-linear-gradient(top, #9ed3f0 0%, #1386c3 100%);
    background: -o-linear-gradient(top, #9ed3f0 0%, #1386c3 100%);
    background: -ms-linear-gradient(top, #9ed3f0 0%, #1386c3 100%);
    background: linear-gradient(top, #9ed3f0 0%, #1386c3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9ed3f0", endColorstr="#1386c3", GradientType=0);
    -webkit-box-shadow: 0px 0px 0px 0px #000;
    -moz-box-shadow: 0px 0px 0px 0px #000;
    box-shadow: 0px 0px 0px 0px #000;
}
.btn_gamme_surveillance:hover{
    border: 1px solid #56B2E4;
    color: #FFFFFF;
    -webkit-border-radius: 17px;
    -moz-border-radius: 17px;
    border-radius: 17px;
    height: 37px;
    bottom: -18px;
    left: 50%;
    margin-left: -103px;
    position: absolute;
    width: 206px;
    z-index: 1;
    background: #1f9be0;
    background: -moz-linear-gradient(0deg, #1f9be0 0%, #0b6da2 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #1f9be0), color-stop(100%, #0b6da2));
    background: -webkit-linear-gradient(0deg, #1f9be0 0%, #0b6da2 100%);
    background: -o-linear-gradient(0deg, #1f9be0 0%, #0b6da2 100%);
    background: -ms-linear-gradient(0deg, #1f9be0 0%, #0b6da2 100%);
    background: linear-gradient(0deg, #1f9be0 0%, #0b6da2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1f9be0", endColorstr="#0b6da2", GradientType=1);
    -webkit-box-shadow: 0px 0px 0px 0px #000;
    -moz-box-shadow: 0px 0px 0px 0px #000;
    box-shadow: 0px 0px 0px 0px #000;
        -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.btn_gamme_surveillance a:hover{
    color: #FFFFFF;
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

.btn_gamme_tel p {
    padding: 12px;
    text-align: center;
    background: url(../img/pdf_icon.png) no-repeat scroll right rgba(0, 0, 0, 0);
    width: 180px;
}
.btn_gamme_imp p {
    padding: 12px;
    text-align: center;
    background: url(../img/pdf_icon.png) no-repeat scroll right rgba(0, 0, 0, 0);
    width: 180px;
}
.btn_gamme_surveillance p {
    padding: 12px;
    text-align: center;
    background: url(../img/pdf_icon.png) no-repeat scroll right rgba(0, 0, 0, 0);
    width: 180px;
}
/***********/




/******************/

/*TELEPHONIE*/

/******************/


.row_light {
    width: 100%;
    padding: 30px 0;
    background: #f6f6f6;
}

.row_light .contain {
    width: 960px;
    margin: 0 auto;
    font-size: 14px;
    color: #000;
}

.contain article {
    text-align: justify;
}
.row_blue {
    width: 100%;
    padding: 30px 0;
    background: #02528b url(../img/blue_deco.jpg) top center repeat-x;
    border-top: 4px solid #bf9d39;
}
.row_blue .radius {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
}
.row_blue .img-row-blue {
    float: right;
    margin: 0 0 30px 30px;
}

.row_blue h2 {
    font-size: 19px;
    padding: 0;
    color: #49a6d9;
    text-align: left;
    font-family: 'Michroma', sans-serif;
    font-weight: normal;
    margin: 0;
    line-height: normal;
}

.row_blue p {
    margin-top: 20px
}
.row_blue .contain {
    color: #fff;
}
.row_blue .contain {
    width: 960px;
    margin: 0 auto;
    font-size: 14px;
}

.unify-bloc{
    text-align: center;
    margin-top: 50px;
}

 .unify-bloc iframe{
    border: 1px solid #cecece;
}

/****************/

/*NOS PRODUITS*/

/*****************/


#produit-body .bloc-produit {
    margin: 0 auto;
    width: 980px;
    padding: 30px 10px 30px 10px;
}


.desc-produit{

}

.produits_content-img {
    margin: 0 auto;
    padding: 28px 0;
    width: 960px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


#produit-body .produits-bloc{

}

.row_blue_produit .col4 {
    width: 300px;
    margin: 0 10px;
    float: left;
    text-align: left
}



.row_blue_produit{
    padding: 30px 20px;
    width: 100%;
    /*padding: 30px 0;*/
    background: #02528b url(../img/blue_deco.jpg) top center repeat-x;
    border-top: 4px solid #bf9d39;
}


.row_blue_produit .radius {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
}
.row_blue_produit .img-row-blue {
    float: right;
    margin: 0 0 30px 30px;
}

.row_blue_produit h2 {
    font-size: 19px;
    padding: 0;
    color: #49a6d9;
    text-align: left;
    font-family: 'Michroma', sans-serif;
    font-weight: normal;
    margin: 0;
    line-height: normal;
}

.row_blue_produit ul.list-clean li {
    list-style-type: none;
    padding: 2px 0 2px 15px;
    text-align: left;
    line-height: 1.4;
}

.row_blue_produit h3 {
    font-size: 16px;
    padding: 0;
    color: #49a6d9;
    padding-bottom: 10px;
}
.row_blue_produit p {
    margin-top: 20px
}
.row_blue_produit .contain {
    color: #fff;
}
.row_blue_produit .contain {
    width: 960px;
    margin: 0 auto;
    font-size: 14px;
}


#produit-body .bloc-bottom .contain {
    width: 960px;
    margin: 0 auto;
    font-size: 14px;
    color: #000;
}

.btn_gamme_produits {
    display: inline-block;
    border: 1px solid #CFCFCF;
    border-radius: 17px;
    box-shadow: 0 0 0 0 #000000;
    color: #4B4B4B;
    font-size: 12px;
    font-weight: bold;
    height: 37px;
    width: 206px;
    background: #a3a6a9;
    background: -moz-linear-gradient(0deg, #a3a6a9 0%, #fff 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #a3a6a9), color-stop(100%, #fff));
    background: -webkit-linear-gradient(0deg, #a3a6a9 0%, #fff 100%);
    background: -o-linear-gradient(0deg, #a3a6a9 0%, #fff 100%);
    background: -ms-linear-gradient(0deg, #a3a6a9 0%, #fff 100%);
    background: linear-gradient(0deg, #a3a6a9 0%, #fff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a3a6a9", endColorstr="#fff", GradientType=1);
    -webkit-box-shadow: 0px 0px 0px 0px #000;
    -moz-box-shadow: 0px 0px 0px 0px #000;
    box-shadow: 0px 0px 0px 0px #000;
}

.btn_gamme_produits:hover {
    border: 1px solid #CFCFCF;
    border-radius: 17px;
    box-shadow: 0 0 0 0 #000000;
    color: #FFFFFF;
    height: 37px;
    width: 206px;
    background: #cfcfcf;
    background: -moz-linear-gradient(0deg, #cfcfcf 0%, #a3a6a9 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #cfcfcf), color-stop(100%, #a3a6a9));
    background: -webkit-linear-gradient(0deg, #cfcfcf 0%, #a3a6a9 100%);
    background: -o-linear-gradient(0deg, #cfcfcf 0%, #a3a6a9 100%);
    background: -ms-linear-gradient(0deg, #cfcfcf 0%, #a3a6a9 100%);
    background: linear-gradient(0deg, #cfcfcf 0%, #a3a6a9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cfcfcf", endColorstr="#a3a6a9", GradientType=1);
    -webkit-box-shadow: 0px 0px 0px 0px #000;
    -moz-box-shadow: 0px 0px 0px 0px #000;
    box-shadow: 0px 0px 0px 0px #000;
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.btn_gamme_produits {
    display: inline-block;
    border: 1px solid #CFCFCF;
    border-radius: 17px;
    box-shadow: 0 0 0 0 #000000;
    color: #4B4B4B;
    font-size: 12px;
    font-weight: bold;
    height: 37px;
    width: 206px;
    background: #a3a6a9;
    background: -moz-linear-gradient(0deg, #a3a6a9 0%, #fff 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #a3a6a9), color-stop(100%, #fff));
    background: -webkit-linear-gradient(0deg, #a3a6a9 0%, #fff 100%);
    background: -o-linear-gradient(0deg, #a3a6a9 0%, #fff 100%);
    background: -ms-linear-gradient(0deg, #a3a6a9 0%, #fff 100%);
    background: linear-gradient(0deg, #a3a6a9 0%, #fff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a3a6a9", endColorstr="#fff", GradientType=1);
    -webkit-box-shadow: 0px 0px 0px 0px #000;
    -moz-box-shadow: 0px 0px 0px 0px #000;
    box-shadow: 0px 0px 0px 0px #000;
}

.btn_gamme_produits p {
    padding: 12px;
    text-align: center;
    background: url(../img/pdf_icon.png) no-repeat scroll right rgba(0, 0, 0, 0);
    width: 180px;
}

.btn_gamme_produits a {
    text-decoration: none;
    color: #4B4B4B;
}

.btn_gamme_produits a:hover {
    text-decoration: none;
    color: #FFF;
}

/**********/

/*CONTACT*/

/*********/

.container_contact {
    background-color: #F6F6F6;
    width: 100%;
}
.zone_contact {
    width: 960px;
    margin: 0 auto;
}

.article_contact {
    /*width: 960px;*/
    margin: 0 auto;
    line-height: 20px;
    padding: 20px 20px 20px 15px;
}
.zone_contact h2 {
    color: #49a6d9;
    font-size: 16px;
    padding: 20px 0;
}

.coordonnees_contact {
    width: 302px;
    height: 50px;
    margin: 10px 10px 10px 0;
    float: left;
}
.coordonnees_contact i {
    color: #bf9d39;
    font-size: 16px;
    padding: 0 10px 10px 0;
    height: 50px;
    float: left;
}
.coordonnees_contact p {
    text-align: left;
    width: 287px;
    border-right: 1px dotted;
}

.coordonnees_contact_middle {
    margin: 10px 10px 0;
    float: left;
    width: 302px;
    height: 50px;
}
.coordonnees_contact_middle i {
    color: #bf9d39;
    font-size: 16px;
    float: left;
    padding: 0 10px 0 0;
}

p.patate {
    text-align: left;
    height: 24px;
    width: 285px;
    border-right: 1px dotted;
}
.coordonnees_contact_middle i {
    color: #bf9d39;
    font-size: 16px;
    float: left;
    padding: 0 10px 0 0;
}
.coordonnees_contact_right {
    margin: 10px 10px 0;
    float: left;
    width: 302px;
    height: 50px;
}

.coordonnees_contact_right i {
    color: #bf9d39;
    font-size: 16px;
    float: left;
    padding: 0 10px 0 0;
}
section.formulaire {
    width: 960px;
    margin: 0 auto;
}
.formulaire h2 {
    color: #49a6d9;
    font-size: 16px;
    padding: 20px 0 0;
}
.form_left, .form_middle, .form_right {
    display: inline-block;
    margin: 0 0 20px;
    width: 315px;
    
}
.form-horizontal .form-group {
    margin-right: -15px;
    margin-left: -15px;
}
.form-group {
    margin-bottom: 0 !important;
    margin-left: 0!important;
}
.form-group {
    width: 100%;

}
.form-group input {
    margin: 30px 0 0 0;
    width: 33%;
}
.form-control {
    display: inline-block;
    border: 1px solid #bf9d39;
}
.styled-select {
    width: 33%;
    height: 33px;
    margin: 30px 0 0 0;
    float: left;
    border-radius: 4px;
    border: 1px solid #BF9D39;
    background: url(../img/btn_select.png) no-repeat right #fff;
    overflow: hidden;
}

select.empty {
    color: #999999;
}
select {
    background: transparent;
    width: 100%;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1;
    border: 0;
    border-radius: 0;
    height: 34px;
    color: #000;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

textarea.form-control {
    height: auto;
    margin: 30px 10px 10px 0;
    width: 100%;
}
.form-control {
    display: inline-block!important;
    border: 1px solid #bf9d39;
}
.btn-primary {
    margin: 20px 10px 20px 0;
    height: 35px;
    width: 140px;
    color: #FFF;
    text-transform: uppercase;
    background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #5DBDF0), color-stop(1, #49A7D9) );
    background-image: -o-linear-gradient(bottom, #5DBDF0 0%, #49A7D9 100%);
    background-image: -moz-linear-gradient(bottom, #5DBDF0 0%, #49A7D9 100%);
    background-image: -webkit-linear-gradient(bottom, #5DBDF0 0%, #49A7D9 100%);
    background-image: -ms-linear-gradient(bottom, #5DBDF0 0%, #49A7D9 100%);
    background-image: linear-gradient(to bottom, #5DBDF0 0%, #49A7D9 100%);
}





/*****************/
@media only screen and (max-width: 1300px) {
    #banniere .col-gauche {
        width: 60%;
    }
}

@media only screen and (max-width: 1000px) {

    /*accueil*/

    #produit .game {
        background: #fff;
        padding: 30px 10px;
        margin: 15px 0;
        border-radius: 20px;
        color: #02528b;
        min-height: unset;
        max-height: 610px;
    }
    /*PRESENTATION*/
    article.second {
        margin: 0 auto;
        width: 100%;
        padding: 20px 10px 20px ;
    }
    .col3 {
        width: 100%;
        max-width: 70%;
        margin: 0 auto 50px;
        float: unset;

    }
     
    .description {
        padding: 10px 10px 25px;
        font-size: 13px;
        text-align: center;
        height: unset;
        color: #000;
    }

    /*TELEPHONIE*/
    .row_light .contain {
        width: 100%;
        padding: 0 15px;
    }

    .row_blue .contain {
        width: 100%;
        margin: 0 auto;
        font-size: 14px;
    }

    .row_blue .img-row-blue{
        float: unset;
        display: block;
        margin: 0 0 20px;
        text-align: center;
    }

    .row_blue .img-row-blue img{
        border-radius: 8px
    }

    .row_blue h2 {
        font-size: 19px;
        padding: 0;
        color: #49a6d9;
        text-align: center;
        font-family: 'Michroma', sans-serif;
        font-weight: normal;
        margin: 0;
        line-height: normal;
    }

    .row_blue p {
        margin: 20px 15px;
    }


    /****************/

    /*NOS PRODUITS*/

    /*****************/


    #produit-body .bloc-produit {
        margin: 0 auto;
        width: 100%;
        padding: 30px 15px ;
    }


    .desc-produit{

    }

    .produits_content-img {
    
        padding: 28px 15px;
        width: 100%;
        /*text-align: center;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        align-items: center;*/
    }

    
    #produit-body .produits-bloc{

    }

    .row_blue_produit .contain {
        width: 100%;
        margin: 0 auto;
        font-size: 14px;
    }

    .row_blue_produit .img-row-blue{
        float: unset;
        display: block;
        margin: 0 0 20px;
        text-align: center;
    }

    .row_blue_produit .img-row-blue img{
        border-radius: 8px
    }

    .row_blue_produit h2 {
        font-size: 19px;
        padding: 0;
        color: #49a6d9;
        text-align: center;
        font-family: 'Michroma', sans-serif;
        font-weight: normal;
        margin: 0;
        line-height: normal;
    }

    .row_blue_produit p {
        margin: 20px 15px;
    }

    .row_blue_produit .col4 h3{
        width: 300px;
        margin: 20px 0 5px;
        float: left;
    }

    .row_blue_produit .col4 li{
        margin-left: 40px;
    }

    #produit-body .bloc-bottom .contain {
        width: 100%;
        padding: 0 15px;
        
    }



    /**********/

    /*CONTACT*/

    /*********/

    
    .zone_contact {
        width: 100%;
        margin: 0;
    }

    .article_contact {
       
        margin: 20px 15px;
        line-height: 20px;
        padding: 0;
    }
    .zone_contact h2 {
        color: #49a6d9;
        font-size: 16px;
        margin: 20px 15px;
        padding: 0
    }

    .coordonnees_contact {
        width: 50%;
        height: 50px;
        margin: 10px 15px 20px;
        float: left;
    }
    .coordonnees_contact i {
        color: #bf9d39;
        font-size: 16px;
        padding: 0 10px 10px 0;
        height: 50px;
        float: left;
    }
    .coordonnees_contact p {
        text-align: left;
        width: 100%;
        border-right: 0px dotted;
    }

    .coordonnees_contact_middle {
        margin: 10px 15px 20px;
        float: left;
        width: 50%;
        height: 50px;
    }
    .coordonnees_contact_middle i {
        color: #bf9d39;
        font-size: 16px;
        float: left;
        padding: 0 10px 0 0;
    }

    p.patate {
        text-align: left;
        height: 24px;
        width: 100%;
        border-right: 0px dotted;
    }
    .coordonnees_contact_middle i {
        color: #bf9d39;
        font-size: 16px;
        float: left;
        padding: 0 10px 0 0;
    }
    .coordonnees_contact_right {
        margin: 10px 10px 0;
        float: unset;
        width: 302px;
        height: 50px;
    }

    .coordonnees_contact_right i {
        color: #bf9d39;
        font-size: 16px;
        float: left;
        padding: 0 10px 0 0;
    }
    section.formulaire {
        width: 90%;
        margin: 0 15px;
    }
    .formulaire h2 {
        color: #49a6d9;
        font-size: 16px;
        padding: 20px 0 0;
    }
    .form_left, .form_middle, .form_right {
        display: inline-block;
        margin: 0;
        width: 100%;
        height: 180px;
    }
    .form_middle{
        height: 110px;
    }
    .form-horizontal .form-group {
        margin-right: -15px;
        margin-left: -15px;
    }
    .form-group {
        margin-bottom: 0 !important;
        margin-left: 0!important;
    }
    /*.form-group {
        width: 30%;
        min-width: 250px

    }*/
    .form-group input {
        margin: 30px 0 0 0;
        width: 50%
    }
    .form-control {
        display: inline-block;
        border: 1px solid #bf9d39;
    }
    .styled-select {
        width: 290px;
        height: 33px;
        margin: 30px 0 0 0;
       
    }

    select.empty {
        color: #999999;
    }
    select {
        background: transparent;
        width: 290px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1;
        border: 0;
        border-radius: 0;
        height: 34px;
        color: #000;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    textarea.form-control {
      
        width: 51%;
    }
    .form-control {
        display: inline-block;
        border: 1px solid #bf9d39;
    }
    

    .styled-select {
        width: 50%;
        
    }

}


@media only screen and (max-width: 900px) {
    #banniere .banniere-img img {
        margin: 0px; 
        border-radius: 20px;
        width: 100%
    }
    article.main {
        margin: 0 auto;
        width: 100%;
        padding: 30px 10px 30px 10px;
    }
    .container_zone_plus {
        height: 70px;
        width: 100%;
        margin: 0 auto;
    }

    #main-recrutement .img-bloc{
        /*border: 1px solid;*/
        width: 100%;

        min-width: 600px
        height: 250px;
        float: unset;
        text-align: center
    }
    #main-recrutement section .container .bloc-text-recrut{
        width: 100%;
    }

    ul#zone_plus li {
        float:unset;
        display:block;
        width: 50%;
        margin: auto;
    }
    ul#zone_plus li a span{
        display: block;
        height: 50px;
        vertical-align: middle;
        text-align: center
    }


    section.second_pres {
        width: 100%;
        /*background: #02528b url(../img/yellow_deco.jpg) top center repeat-x;*/
        background: #BE9C42;
        height: 355px;
    }
    ul#zone_plus li:nth-child(2){
        width: 50%;
    }
    ul#zone_plus li:nth-child(3){
        width: 50%;
    }
    ul#zone_plus li a span{
        padding-top: 10px;
    }

    
}

/********************/

/* MENTIONS LEGALES */

/********************/


#mentions_legales h1, #mentions_legales h2,#mentions_legales h3{
    font-family: "Arial", sans-serif;
    color: #02528b;
}
#mentions_legales h3{
    margin-top: 20px 
}

#mentions_legales div{
    margin-top: 30px
}
#mentions_legales a{
    color: #02528b;
}
  

@media only screen and (max-width: 650px) {
    #produit .game {
        background: #fff;
        padding: 30px 10px;
        margin: 15px 0;
        border-radius: 20px;
        color: #02528b;
        min-height: 470px;
        max-height: 610px;
    }





    .col3 {
        max-width: 100%;        
    }
    .form-group input , .form-group select{
        
        width: 100%
    }
    .styled-select {
        width: 100%;
        
    }
    textarea.form-control {
        
        width: 100%;
    }

}

@media only screen and (max-width: 450px) {

    ul#zone_plus li {
        float:unset;
        display:block;
        width: 80%;
        margin: auto;
    }
    ul#zone_plus li:nth-child(2){
        width: 80%;
    }
    ul#zone_plus li:nth-child(3){
        width: 80%;
    }

     .produits_content-img img {
    
      margin: 20px 0;
    }

    .produits_content-img {
    
   
        
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        align-items: center;
    }

    
}



.active{
    color: #333;
    background-color: #fff;
}
#piecejointe {
    display: none;
}

#piecejointe.show {
    display: block;
}

/* THEO */
/* Ajout de marge pour le formulaire de contact (au niveau des upload)*/
.upload-margin {
    margin-bottom: 15px!important;
}