@charset "iso-8859-1";
/* CSS Document */
/*			STYLE GENERAL	 	   */
/*			HABILLAGE PAGE 		   */
/*			HOME			 	   */
/*			PAGE			 	   */
/*			MENU			 	   */
/*			PIED PAGE		 	   */
/*			AUTRE			 	   */
/*			FORM		 		   */



/*** IMPORT RESET CSS ***/
@import url(reset.css);
@import url(kfont.css);

@font-face {
    font-family: 'Raleway';
    src: local('Raleway Regular'), local('Raleway-Regular'),
    url('../fonts/Raleway-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: local('Raleway Bold'), local('Raleway-Bold'),
    url('../fonts/Raleway-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: local('Raleway SemiBold'), local('Raleway-SemiBold'),
    url('../fonts/Raleway-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Slab';
    src: local('Roboto Slab Regular'), local('Roboto-Slab-Regular'),
    url('../fonts/Roboto-Slab-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Slab';
    src: local('Roboto Slab Bold'), local('Roboto-Slab-Bold'),
    url('../fonts/Roboto-Slab-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Slab';
    src: local('Roboto Slab SemiBold'), local('RobotoSlab-SemiBold'),
    url('../fonts/RobotoSlab-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* masque RGAA */
.invisible, hr, .masque, .hidden, #acces .masque, #loading, #logo span, #accroche1 span, #accroche2 span
{
    position:absolute;
    top:-5000px;
    left:-5000px;
    overflow:hidden;
    width:1px;
    height:1px;
}

/* vertical centering */
.autoheight {
    width:auto;
    vertical-align:middle;
    display:inline-block;
    line-height:1.2; /* on rétablit le line-height */
}

/*********** STYLE GENERAL *********/

.slideshow .round .text-shadow {
    text-shadow: 	#2d7b91 1px 1px,
    #2d7b91 2px 2px,
    #2d7b91 3px 3px,
    #2d7b91 4px 4px,
    #2d7b91 5px 5px,
    #2d7b91 6px 6px,
    #2d7b91 7px 7px,
    #2d7b91 8px 8px,
    #2d7b91 9px 9px,
    #2d7b91 10px 10px,
    #2d7b91 11px 11px,
    #2d7b91 12px 12px,
    #2d7b91 13px 13px,
    #2d7b91 14px 14px,
    #2d7b91 15px 15px,
    #2d7b91 16px 16px,
    #2d7b91 17px 17px,
    #2d7b91 18px 18px,
    #2d7b91 19px 19px,
    #2d7b91 20px 20px,
    #2d7b91 21px 21px,
    #2d7b91 22px 22px,
    #2d7b91 23px 23px,
    #2d7b91 24px 24px,
    #2d7b91 25px 25px,
    #2d7b91 26px 26px,
    #2d7b91 27px 27px,
    #2d7b91 28px 28px,
    #2d7b91 29px 29px,
    #2d7b91 30px 30px,
    #2d7b91 31px 31px,
    #2d7b91 32px 32px,
    #2d7b91 33px 33px,
    #2d7b91 34px 34px,
    #2d7b91 35px 35px,
    #2d7b91 36px 36px,
    #2d7b91 37px 37px,
    #2d7b91 38px 38px,
    #2d7b91 39px 39px,
    #2d7b91 40px 40px,
    #2d7b91 41px 41px,
    #2d7b91 42px 42px,
    #2d7b91 43px 43px,
    #2d7b91 44px 44px,
    #2d7b91 45px 45px,
    #2d7b91 46px 46px,
    #2d7b91 47px 47px,
    #2d7b91 48px 48px,
    #2d7b91 49px 49px,
    #2d7b91 50px 50px,
    #2d7b91 51px 51px,
    #2d7b91 52px 52px,
    #2d7b91 53px 53px,
    #2d7b91 54px 54px,
    #2d7b91 55px 55px,
    #2d7b91 56px 56px,
    #2d7b91 57px 57px,
    #2d7b91 58px 58px,
    #2d7b91 59px 59px
}

.symbol-plus {
    display : block;
    width : 40px;
    height : 6px;
    background : rgba(190, 192, 192, 0.8);
    position : relative;
}

.symbol-plus .wire {
    width : 6px;
    height : 17px;
    background : rgba(190, 192, 192, 0.8);
    position : absolute;
    left : 17px;
}

.symbol-plus .wire.wire-up {
    bottom : 6px;
}

.symbol-plus .wire.wire-down {
    top : 6px;
}

.cd-filters  {
    text-align : center;
}

.cd-filters li {
    display : inline-block;
    margin : 0 10px;
    padding : 3px 7px;
    font-family: "Roboto Slab",serif;
    font-weight : 700;
    color : #ffffff;
    font-size : 12px;
    line-height : 15px;
    border-radius : 3px;
    transition : background 0.2s ease-in-out;
    -webkit-transition : background 0.2s ease-in-out;
}

.cd-filters li a {
    color : #ffffff;
}

.cd-filters li.active {
    background : #F1784B;
}

.button {
    border: 1px solid #ff7b00;
    border-radius: 3px;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    height: 30px;
    line-height: 28px;
    vertical-align : middle;
    margin: 5px auto;
    text-align: center;
    min-width: 120px;
    padding : 0 5px;
    cursor : pointer;
    color:#ff7b00;
    background : #ffffff;
    transition : all 0.2s ease-in-out;
}

:hover.button  {
    border: 1px solid #ff7b00;
    background:#ff7b00;
    color:#FFF;
}

:hover.button.btn2  {
    border: 2px solid #FFFFFF;
}
/*
.button.btn1 {
    color: #ff7b00;
}
*/
.button.btn2 {
    border: 2px solid #ff7b00;
    line-height : 26px;
    background: #ff7b00;
    color:#FFF;
    font-size:12px;
}

.button.btn3 {
    border: 2px solid rgba(255, 255, 255, 0.7) !important;
    background: transparent;
    color:#FFF;
    font-size:12px;
    line-height : 26px;
}

.button.btn3:hover {
    border: 2px solid rgba(255, 255, 255, 0.7) !important;
    background: rgba(0, 0, 0, 0.5);
    color:#FFF;
    font-size:12px;
    line-height : 26px;
}

.button.btn4 {
    border: 2px solid rgba(0, 0, 0, 0.7) !important;
    background: transparent;
    color:#000000;
    font-size:12px;
    font-weight : 300;
    line-height : 26px;
}

.button.btn4:hover {
    border: 2px solid rgba(0, 0, 0, 0.7) !important;
    background: rgba(255, 255, 255, 0.5);
    color:#000000;
    font-size:12px;
    line-height : 26px;
}

.button.btn5 {
    border: 2px solid rgba(255, 255, 255, 1) !important;
    background: #ffffff;
    color:#000000;
    font-size:12px;
    font-weight : 300;
    line-height : 26px;
}

.button.btn5:hover {
    border: 2px solid rgba(255, 255, 255, 1) !important;
    background: rgba(255, 255, 255, 0.5);
    color:#000000;
    font-size:12px;
    line-height : 26px;
}

.button .btn_circle {
    width : 16px;
    height : 16px;
    display : inline-block;
    border-radius : 8px;
    line-height : 1.2em;
}

.button span {
    display : inline-block;
    line-height : 1.2em;
    vertical-align : middle
}

.button.btn1 .btn_circle {
    background : #ff7b00;
}

.success {
    background : rgba(129, 214, 25, 0.4);
    border : 1px solid rgba(129, 214, 25, 0.8);
    border-radius : 3px;
    padding : 10px;
}

.alert {
    background : rgba(191, 53, 15, 0.4);
    border : 1px solid rgba(191, 53, 15, 0.8);
    border-radius : 3px;
    padding : 10px;
    color : #ffffff;
}

/*rules for filtering */

.mix{
    display: none;
}

/* rules for errors */

.log_error {
    background : rgba(206, 49, 49, 0.3);
    border : 1px solid rgba(206, 49, 49, 0.8);
    padding : 10px;
    margin : 20px auto;
    color : rgba(140, 26, 26, 0.8);
    font-size : 13px;
    font-weight : 700;
}

.log_error  li {
    line-height : 20px;
    margin : 0 0 5px 0;
    color : #DB2065;
}

.log_error  li .picto {
    display : inline-block;
    width : 20px;
    height : 20px;
    color : #ffffff;
    background : #DB2065;
    border-radius : 50%;
    margin-right : 10px;
    text-align : center;
}

input.error_border, textarea.error_border {
    background : rgba(241, 120, 75, 0.5);
}

html
{
    font-size:62.5%;
    height : 100%;
    /* pour hauteur 100% */
    /*min-height: 100%;  hauteur 100% */
    /*height: 100%;  hauteur 100%
    /*background-color:#62a2e4;  indispensable force la hauteur 100% */
}

html, body
{
    /*position:relative;
    height: 100%;*/
}
body
{
    background: repeat left top #ffffff;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    color: #666;
    text-align:center; /* center pour ie 5 */
    /*min-height: 100%;  hauteur 100% */
    /*padding:1px;  pour hauteur 100% */

}

body, form, fieldset, button, textarea {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    color: #666;
}

body.mobileopen {
    overflow : hidden;
    height : 100vh;
    position : fixed;
    top : 0;
    left : 0;
    width : 100%;
}

/*** lien ***/
/* Remember "LoVe/HAte" Linking */
a  {
    color: #F1784B;
    text-decoration: none;
    /*position:relative; ie6 */

    -o-transition: background-color .2s ease-in, color .2s ease-in, box-shadow .2s ease-in;
    -webkit-transition: background-color .2s ease-in, color .2s ease-in, box-shadow .2s ease-in;
    -moz-transition: background-color .2s ease-in, color .2s ease-in, box-shadow .2s ease-in;
    transition: background-color .2s ease-in, color .2s ease-in, box-shadow .2s ease-in;
}

a:hover, a:active, a:focus { /* ce groupe de sélecteurs offrira à un navigateur au clavier la même expérience de survol que celle d'une personne employant la souris. */
    color: #544F42;
}


/*** TITRE ***/
h1,
.h1,
.titre
{
    color:#666;
    font-size:130%;
    margin:1em 0;
    font-weight:bold;
}
h2,
.h2,
.stitre
{
    font-size:110%;
    color:#666; /* B05737 7A715C */
    margin:0.6em 0;
    font-weight:bold;
}

#grid_builder h2,
.aide h2,
#grid_builder .h2,
.aide .h2 {
    color: #3f4244;
    font-family: "Roboto Slab",serif;
    font-size: 1.5em;
    font-weight: 700;
    margin: 1em 0 0.7em;
    padding: 0;
    position: relative;
}

h3,
.h3,
.sstitre
{
    font-size:110%;
    margin:0.3em 0;
}

.hide{
    display: none;
}

/*** Style générique ***/
.fixed { position:fixed; }
.relative { position:relative; }
.absolute { position:absolute; }
.static { position:static; overflow:hidden; }

.inline { display:inline; }
.inlineblock { display:inline-block; }
.block { display:block; }

.floatleft { float:left; }
.floatright { float:right; }
.floatnone { float:none; }

.textleft {	text-align:left; }
.textright { text-align:right; }
.textcenter { text-align:center; }
.textjustify { text-align:justify; }

.width80 { width:80%; }
.width60 { width:60%; }
.width45 { width:45%; }
.width47 { width:47%; }
.width35 { width:35%; }
.width25 { width:25%; }

.margin0 { margin:0; }
.marginauto { margin:auto; }

.marginright { margin-right:1em; }
.marginleft { margin-left:1.5em; }

.marginbottom { margin-bottom:2em; }
.margintop { margin-top:2em; }
.margintop-2 { margin-top:-2em; }

.vmiddle { vertical-align:middle; }
.vtop { vertical-align:top; }
.vbottom { vertical-align:bottom; }

.big { font-size:120%; }
.mini { font-size:80%; }
.fontsize80 { font-size:80%; }
.fontsize85 { font-size:85%; }
.fontsize90 { font-size:90%; }
.fontsize110 { font-size:110%; }
.fontsize120 { font-size:120%; }

.color1, .color1 a { color: #43a6bf;  }
.color2, .color2 a { color: #c00; }
.color3, .color3 a {  }
.color4, .color4 a {  }
.color5, .color5 a {  }

.lowercase { text-transform:lowercase; }
.uppercase { text-transform:uppercase; }


/* `Clear Floated Elements */
.wrap,
.clear,
.line,
.row
{
    clear:both;
}

.circle {
    border-radius : 50%;
}

.circle:before {
    content : '';
    display : block;
    padding-top : 100%;
}

/* http://sonspring.com/journal/clearing-floats */

.clear
{
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before, .clearfix:after
{
    content: '.';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
.clearfix:after { clear: both; }

.aheight {
    display : inline-block;
    line-height : 1.2;
    vertical-align : middle;
}

.aheightbis{
    line-height: normal;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/
.ie6 .clearfix, .ie7 .clearfix { zoom: 1; }



/* blocks that must contain floats */
/* Les blocks qui doivent se placer sous les flottants, donc constituer des nouvelles lignes, sont .clear, .line et .row
Accessoirement, les boîtes qui doivent contenir des élements flottants sans débordements sont des .clearfix, .line et .mod */
.clearfix:after,
.line:after,
.mod:after {
    content: "";
    display: table;
    clear: both;
}

/* grid rules */

.grid_25 {
    width : 25%;
    float : left;
    position : relative;
}

.grid_50 {
    width : 50%;
    float : left;
    position : relative;
}

.overlay_mask {
    position : absolute;
    height : 100%;
    width : 100%;
    top : 0;
    left : 0;
    background : #000;
}

.abs_container {
    position : absolute;
    top : 0;
    left : 0;
    right : 0;
    bottom : 0;
}

/* cookies */

#cookies_content {
    position : fixed;
    bottom : 0;
    left : 0;
    width : 100%;
    height : 50px;
    background : #000000;
    color : #ffffff;
    z-index : 1000;
}

#cookies_content .container {
    position : relative;
}

.alert_txt {
    padding : 0 50px 0 0;
    margin : 0;
    height : 50px;
    line-height : 50px;
    vertical-align : middle;
    font-size : 12px;
}

.alert_close {
    position : absolute;
    top : 50%;
    right : 0;
    width : 30px;
    height : 30px;
    margin-top : -15px;
}

.alert_close a {
    display : inline-block;
    padding : 5px 10px;
    height : 30px;
    line-height : 20px;
    position : relative;
    display : inline-block;
    background : #FF7B00;
    border-radius : 3px;
    color : #ffffff;
    text-decoration : none;
}

/* Largeur élément général de la page */

.widthgen { margin:auto; position:relative; } /* largeur générique */


#bandeau, #mh, #mb, #mots, .widthgen
{
    width:1200px;
    /*min-width:960px;
    max-width:80%;*/
}
#bandeau, #contenu
{ /* anul le bug positionnement ie 5 */
    text-align:left;
}

#mm {
    display : none;
    position : absolute;
    top : 26px;
    left : 0;
}

#mobile_nav {
    display : block;
    visibility : hidden;
    opacity : 0;
    position : fixed;
    top : 0;
    left : 0;
    height : 100%;
    width : 100%;
    background : rgba(68, 68, 68, 0.8);
    z-index : 199;
    -webkit-transform: translateZ(0);

    transition : all .2s ease-in-out;
}

#mobile_nav.open{
    display : block;
    visibility : visible;
    opacity : 1;

    transition : all .5s ease-in-out;
}

#mobile_nav .mobile_container {
    width : 240px;
    background : #ffffff;
    position : absolute;
    top : 0;
    left : 0;
    height : 100%;
    z-index : 2;

    transform : translateX(-100%);
    -ms-transform : translateX(-100%);
    -webkit-transform : translateX(-100%) translateZ(0);

    transition : all .2s ease-in-out;
}

#mobile_nav.open .mobile_container {
    transform : translateX(0);
    -ms-transform : translateX(0);
    -webkit-transform : translateX(0);

    transition : all .5s ease-in-out;
}

#mobile_menu {
    color : #000000;
    margin : 0;
    position : fixed;
    width : 240px;
    height : 100vh;
    padding : 80px 0 80px 0;
    overflow : auto;
    display : block;
    left : 0;
    top : 0;
}

#mobile_nav .title {
    background : rgba(255, 255, 255, 0.5);
    color : #444444;
    font-family : 'Raleway', sans-serif;
    text-transform : uppercase;
    position : absolute;
    display : block;
    top : 99px;
    height : 50px;
    left : 0;
}

#mobile_menu > li {
    border-bottom : 1px solid rgba(255, 255, 255, 0.5);
    padding : 0.5em 0;
    margin: -1px 0 0;

    transition : all .3s ease-in-out;
}

#mobile_menu li {
    margin-left : 0;
}

#mobile_menu > li:first-child {
    border-top : 1px solid rgba(255, 255, 255, 0.5);
}

#mobile_menu > li > ul {
    visibility : hidden;
    opacity : 0;
    display : block;
    max-height : 0;
    transition : all .3s ease-in-out;
    margin : 0;
    overflow : hidden;
}

#mobile_menu > li a {
    padding : 0.5em 0.3em 0.5em 10px;
    display : block;
    border-radius : 0.1em;
    line-height : 1.6em;
    font-size : 0.9em;
    background : #ffffff;

    transition : all .2s ease-in-out;
}

#mobile_menu > li .submenu a {
    font-size : 0.8em;
    font-weight : 400;
    padding : 0.5em 0.3em 0.5em 30px;
}

#mobile_menu > li .submenu a.submenutitle {
    font-weight : 700;
}

#mobile_menu > li .submenu a.submenutitle:hover {
    color : #000000;
}

#mobile_menu > li.active {

}

#mobile_menu > li.active > a {
    color : #43A6BF;
    padding : 0.5em 0.3em 0.5em 30px;
    background : #ededed;

    transition : padding .2s ease-in-out;
}

#mobile_menu > li.active a:hover {
    color : #f1784b;
}

#mobile_menu > li.active > ul {
    visibility : visible;
    height : auto;
    max-height : 500px;
    opacity : 1;
    margin : 0.5em 0;
}

#mobile_menu a {
    color : #222222;
    font-family : 'Raleway', sans-serif;
    text-transform : uppercase;
    font-weight : 700;
}

.container {
    margin : 0 auto;
    width : 1200px;
}

#bandeau > .container, #topmenu_container > .container, #header .bxslider .container {
    position : relative;
    height: 100%;
}

#internet_presentation .story_section {
    position : relative;
    perspective : 300px;
    -webkit-perspective : 300px;
}

section {
    min-height : 100px;
}

section.dark {
    background : #242a2c;
    color : #ffffff;
}


section .container > header {
    text-align : left;
}

section .container header.classic_title {
    text-align : left;
}

section .container > header h1,
section .container > header h2,
section .container > header .h1,
section .container > header .h2,
#cms .container h1,
.aide h1,
.page_presse .container h1 {
    font-size : 2em;
    font-weight : 700;
    font-family : "Roboto Slab",serif;
    margin : 1em 0 0.6em 0;
    padding : 0 0 0.3em 0;
    color : #3f4244;
    display : inline-block;
    position : relative;
}

section .container header.classic_title h1,
section .container header.classic_title h2,
section .container .header.classic_title h2,
section .container header.classic_title .h1,
section .container header.classic_title .h2,
section .container .header.classic_title .h2 {
    font-family: "Roboto Slab",serif;
    font-weight : 700;
    color : #3f4244;
    font-size : 1.5em;
    margin : 1em 0 0.7em 0;
    padding : 0;
}

section.dark .container > header h2 {
    color : #ffffff;
}

h1.underline::after,
h2.underline::after,
#cms h1:after,
.page_presse .container h1:after,
.h1.underline::after,
.h2.underline::after,
#cms .h1:after,
.page_presse .container .h1:after {
    content : '';
    width : 110px;
    height : 2px;
    background : #43a6bf;
    position : absolute;
    bottom : -10px;
    left : 0;
}

.page_services-heberges h1.underline::after,
.page_services-heberges h2.underline::after,
#cms.page_services-heberges h1:after,
#cms.page_messagerie h1:after,
#cms.page_domaine h1:after,
#cms.page_certificat-ssl h1:after,
#cms.page_supervision-avancee h1:after,
#cms.page_hebergement h1:after
{
    background : #44B982;
}

.page_services-telecoms h1.underline::after,
.page_services-telecoms h2.underline::after,
#cms.page_services-telecoms h1:after,
#cms.page_interconnexion-vpn-mpls h1:after,
#cms.page_kyproxy-solution-proxy h1:after,
#cms.page_cloud-synchro h1:after,
#cms.page_interconnexion-vpn-mpls h1:after,
#cms.page_voip-entreprises h1:after {
    background : #F27062;
}

/* logo kyxar animé  */

.logo {
    width : 190px;
    position : absolute;
    top : 23px;
    left : 0;
}

.logo .logo_circle {
    width : 25%;
    margin-top : 0;
    margin-right : 4%;
    position : relative;
    border-radius : 50%;
    float : left;
}

#logo_text, .logo_text {
    height : 65px;
}

#logo_text svg, .logo_text svg {
    width : 133px;
    height : 52px;
    overflow : visible;
}

.logobg_anim {
    position : absolute;
    width : 100%;
    height : 100%;
    background : #43a6bf;
    border-radius : 50%;

    animation : circlebgout 1.2s;
    -webkit-animation : circlebgout 1.2s;
    transition : background 0.3s ease-in-out;

    box-shadow: none;

    transition : box-shadow 0.2s ease-in-out;
    -ms-transition : box-shadow 0.2s ease-in-out;
    -webki-transition : box-shadow 0.2s ease-in-out;
}

#kyxar_logo:hover .logobg_anim {
    -moz-box-shadow: 0px 0px 0px 15px rgba(67, 166, 191, 0.4);
    -webkit-box-shadow: 0px 0px 0px 15px rgba(67, 166, 191, 0.4);
    -o-box-shadow: 0px 0px 0px 15px rgba(67, 166, 191, 0.4);
    box-shadow: 0px 0px 0px 15px rgba(67, 166, 191, 0.4);
}

.logoborder_anim {
    position : absolute;
    width : 100%;
    border-radius : 50%;
    box-shadow: 0 0 0 15px rgba(67, 166, 191, 0.3) inset;
    animation : circleout 1s;
    -webkit-animation : circleout 1s;
    opacity : 0;

    top : 50%;
    left : 50%;
    margin-left : -50%;
    margin-top : -50%;
}

.logoborder_anim.delay1 {
    animation-delay : 0.15s;
    -webkit-animation-delay : 0.15s;
    box-shadow: 0 0 0 10px rgba(67, 166, 191, 0.5) inset;
}

.logoborder_anim.delay2 {
    animation-delay : 0.30s;
    -webkit-animation-delay : 0.30s;
    box-shadow: 0 0 0 5px rgba(67, 166, 191, 0.8) inset;
}

.logoborder_anim.delay3 {
    animation-delay : 0.45s;
    -webkit-animation-delay : 0.45s;
    box-shadow: 0 0 0 2px rgba(67, 166, 191, 1) inset;
}

.logo_circle:after, .logoborder_anim:after {
    content : '';
    padding-top : 100%;
    display : block;
}

.logo .bar1 {
    width : 10.936%;
    height : 30.045%;
    background : #ffffff;
    position : absolute;
    top : 19.138%;
    left : 31.397%;
    animation : delayfade1 1.6s;
    -webkit-animation : delayfade1 1.6s;
}

.logo .bar1:before {
    width : 100%;
    height : 36.398%;
    content : '';
    background : #ffffff;
    border-radius : 50%;
    position : absolute;
    top : -18.199%;
    left : 0;
}

.logo .bar1:after {
    width : 100%;
    height : 36.398%;
    content : '';
    background : #ffffff;
    border-radius : 50%;
    position : absolute;
    bottom : -18.199%;
    left : 0;
}

.logo .bar2 {
    width : 10.936%;
    height : 17.266%;
    background : #1d1d1d;
    position : absolute;
    top : 63.77%;
    left : 31.397%;
    animation : delayfade2 1.6s;
    -webkit-animation : delayfade2 1.6s;
}

.logo .bar2:before {
    width : 100%;
    height : 63.3383%;
    content : '';
    background : #1d1d1d;
    border-radius : 50%;
    position : absolute;
    top : -31.669%;
    left : 0;
}

.logo .bar2:after {
    width : 100%;
    height : 63.3383%;
    content : '';
    background : #1d1d1d;
    border-radius : 50%;
    position : absolute;
    bottom : -31.669%;
    left : 0;
}

.logo .bar3 {
    position : absolute;
    top : 0;
    left : 0;
    display : block;
    width : 100%;
    height : 100%;
    animation : delayfade3 1.6s;
    -webkit-animation : delayfade3 1.6s;

    -ms-transform-origin: 57% 60%;
    -webkit-transform-origin: 57% 60%;
    transform-origin: 57% 60%;

    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);

}

.logo .bar3 .sub_bar1 {
    width : 10.936%;
    height : 27.723%;
    background : #ffffff;
    position : absolute;
    top : 28.663%;
    left : 43.376%;
    z-index : 3;
}

.logo .bar3 .sub_bar1:before {
    width : 100%;
    height : 39.4474%;
    content : '';
    background : #ffffff;
    border-radius : 50%;
    position : absolute;
    top : -19.7236%;
    left : 0;
}

.logo .bar3 .sub_bar2 {
    width : 27.032%;
    height : 10.936%;
    background : #ffffff;
    position : absolute;
    top : 58.053%;
    left : 55.768%;
    z-index : 3;
}

.logo .bar3 .sub_bar2:after {
    width : 40.455%;
    height : 100%;
    content : '';
    background : #ffffff;
    border-radius : 50%;
    position : absolute;
    top : 0;
    right : -20.228%;
}

.logo .bar3 .sub_inter {
    width : 10.936%;
    height : 10.936%;
    background : #ffffff;
    position : absolute;
    top : 58.053%;
    left : 43.376%;
    border-radius : 0 0 0 80% / 0 0 0 80%;
    z-index : 2;
}

.logo .bar3 .sub_inter:before {
    content:'';
    width : 100%;
    height : 50%;
    background : #ffffff;
    position : absolute;
    top : -40%;
    left : 0;
}

.logo .bar3 .sub_inter:after {
    content:'';
    width : 50%;
    height : 100%;
    background : #ffffff;
    position : absolute;
    bottom : 0;
    right : -40%;
}

.switch_color {
    width : 80px;
    height : 50px;
    position : fixed;
    top : 40%;
    right : 0;
}

.switch_color #switch {
    background : #222222;
    color : #ffffff;
    width : 100%;
    height : 100%;
    display : block;
    line-height : 50px;
    text-align : center;
    text-transform : uppercase;
    cursor : pointer;
}

.logo.style2 .bar2, .logo.style2 .bar2:before, .logo.style2 .bar2:after{
    background : #f1784d;
}

.logo.style3 .logobg_anim {
    background : #222222;
}

.logo.style3 .bar1, .logo.style3 .bar1:before, .logo.style3 .bar1:after,
.logo.style3 .bar3 .sub_inter, .logo.style3 .bar3 .sub_inter:before, .logo.style3 .bar3 .sub_inter:after,
.logo.style3 .bar3 .sub_bar1, .logo.style3 .bar3 .sub_bar1:before,
.logo.style3 .bar3 .sub_bar2, .logo.style3 .bar3 .sub_bar2:after  {
    background : #43a6bf;
}

.logo.style3 .bar2, .logo.style3 .bar2:before, .logo.style3 .bar2:after{
    background : #f1784d;
}

.svgLoaded #quote_left {
    -webkit-animation: fade-brace-right 1s ease-in-out 0.25s;
    animation: fade-brace-right 1s ease-in-out 0.25s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
}

.svgLoaded #quote_right {
    -webkit-animation: fade-brace-left 1s ease-in-out 0.25s;
    animation: fade-brace-left 1s ease-in-out 0.25s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
}

.svgLoaded #letter_1 {
    -webkit-animation: fade-top 0.8s ease-in-out 0.25s;
    animation: fade-top 0.8s ease-in-out 0.25s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.svgLoaded #letter_2{
    -webkit-animation: fade-bottom 0.8s ease-in-out 0.25s;
    animation: fade-bottom 0.8s ease-in-out 0.25s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}

.svgLoaded #letter_3 {
    -webkit-animation: fade-right 0.5s ease-in-out 0.25s;
    animation: fade-right 0.5s ease-in-out 0.25s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
}

.svgLoaded #letter_4{
    -webkit-animation: fade-top 0.8s ease-in-out 0.25s;
    animation: fade-top 0.8s ease-in-out 0.25s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.7s;
}

.svgLoaded #letter_5{
    -webkit-animation: fade-right 0.8s ease-in-out 0.25s;
    animation: fade-right 0.8s ease-in-out 0.25s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

@keyframes circleout {
    0% {
        transform: scale3d(0.1, 0.1, 1);
        opacity : 0;
    }
    10% {
        opacity : 1;
    }
    90% {
        opacity : 1;
    }
    100%{
        transform: scale3d(1, 1, 1);
        opacity : 0;
    }
}

@-webkit-keyframes circleout{
    0% {
        transform: scale3d(0.1, 0.1, 1);
        opacity : 0;
    }
    10% {
        opacity : 1;
    }
    90% {
        opacity : 1;
    }
    100%{
        transform: scale3d(1, 1, 1);
        opacity : 0;
    }
}

@keyframes circlebgout {
    0% {
        opacity : 0;
    }
    50% {
        transform: scale3d(0.1, 0.1, 1);
        -webkit-transform: scale3d(0.1, 0.1, 1);
        opacity : 0;
    }
    100%{
        transform: scale3d(1, 1, 1);
        -webkit-transform: scale3d(1, 1, 1);
        opacity : 1;
    }
}


@-webkit-keyframes circlebgout {
    0% {
        opacity : 0;
    }
    50% {
        -webkit-transform: scale3d(0.1, 0.1, 1);
        opacity : 0;
    }
    100%{
        -webkit-transform: scale3d(1, 1, 1);
        opacity : 1;
    }
}

@keyframes delayfade1 {
    0% {
        opacity : 0;
    }
    60% {
        opacity : 0;
        transform: translate3d(0,-20px,0);
    }
    100%{
        opacity : 1;
        transform: translate3d(0,0,0);
    }
}

@-webkit-keyframes delayfade1 {
    0% {
        opacity : 0;
    }
    60% {
        opacity : 0;
        -webkit-transform: translate3d(0,-20px,0);
    }
    100%{
        opacity : 1;
        -webkit-transform: translate3d(0,0,0);
    }
}

@keyframes delayfade2 {
    0% {
        opacity : 0;
    }
    55% {
        opacity : 0;
        transform: translate3d(0,20px,0);
    }
    100%{
        opacity : 1;
        transform: translate3d(0,0,0);
    }
}

@-webkit-keyframes delayfade2 {
    0% {
        opacity : 0;
    }
    55% {
        opacity : 0;
        -webkit-transform: translate3d(0,20px,0);
    }
    100%{
        opacity : 1;
        -webkit-transform: translate3d(0,0,0);
    }
}

@keyframes delayfade3 {
    0% {
        opacity : 0;
    }
    50% {
        opacity : 0;
        transform: translate3d(30px,0,0) rotate(45deg);
    }
    100%{
        opacity : 1;
        transform: translate3d(0,0,0) rotate(45deg);
    }
}

@-webkit-keyframes delayfade3 {
    0% {
        opacity : 0;
    }
    50% {
        opacity : 0;
        -webkit-transform: translate3d(30px,0,0) rotate(45deg);
    }
    100%{
        opacity : 1;
        -webkit-transform: translate3d(0,0,0) rotate(45deg);
    }
}

@keyframes fade-brace-right {
    0% {
        -moz-transform: translateX(150px);
        transform: translateX(150px);
        opacity: 0; }

    20% {
        opacity: 1;
        -moz-transform: translateX(150px);
        transform: translateX(150px); }

    100% {
        -moz-transform: translateX(0px);
        transform: translateX(0px); } }

@-webkit-keyframes fade-brace-right {
    0% {
        -webkit-transform: translateX(150px);
        transform: translateX(150px);
        opacity: 0; }

    20% {
        opacity: 1;
        -webkit-transform: translateX(150px);
        transform: translateX(150px); }

    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px); }
}

@keyframes fade-brace-left {
    0% {
        -moz-transform: translateX(-150px);
        transform: translateX(-150px);
        opacity: 0; }

    20% {
        opacity: 1;
        -moz-transform: translateX(-150px);
        transform: translateX(-150px); }

    100% {
        -moz-transform: translateX(0px);
        transform: translateX(0px); }
}

@-webkit-keyframes fade-brace-left {
    0% {
        -webkit-transform: translateX(-150px);
        transform: translateX(-150px);
        opacity: 0; }

    20% {
        opacity: 1;
        -webkit-transform: translateX(-150px);
        transform: translateX(-150px); }

    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px); }
}

@keyframes fade-right {
    0% {
        -moz-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0; }

    100% {
        -moz-transform: translateX(0px);
        transform: translateX(0px); } }

@-webkit-keyframes fade-right {
    0% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0; }

    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px); }
}

@keyframes fade-left {
    0% {
        -moz-transform: translateX(-50px);
        transform: translateX(-50px);
        opacity: 0; }

    100% {
        -moz-transform: translateX(0px);
        transform: translateX(0px); }
}

@-webkit-keyframes fade-left {
    0% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        opacity: 0; }

    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px); }
}

@keyframes fade-top {
    0% {
        -moz-transform: translateY(-50px);
        transform: translateY(-50px);
        opacity: 0; }

    100% {
        -moz-transform: translateY(0px);
        transform: translateY(0px); } }

@-webkit-keyframes fade-top {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
        opacity: 0; }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px); }
}

@keyframes fade-bottom {
    0% {
        -moz-transform: translateY(130px);
        transform: translateY(130px);
        opacity: 0; }

    100% {
        -moz-transform: translateY(0px);
        transform: translateY(0px); } }

@-webkit-keyframes fade-bottom {
    0% {
        -webkit-transform: translateY(130px);
        transform: translateY(130px);
        opacity: 0; }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px); }
}

@keyframes fade-in {
    0% {
        opacity: 0; }

    100% {
        opacity: 1; } }

@-webkit-keyframes fade-in {
    0% {
        opacity: 0; }

    100% {
        opacity: 1; }
}

/***** HEADER ACCES *****/

#acces
{ /* acces rapide haut page */
    position:absolute;
    top:0;
    right:0;
    /*background-color:#eee;*/
}

/*** Acces rapide Contenu haut page ***/

#accesmenu
{
    margin:0;
    text-align : right;
}
#accesmenu li
{
    /*float:left;*/
    display:inline-block;
    margin:0;
    list-style:none;
    color:#807A6E;
}
#accesmenu li a,
#accesmenu li .group_acces
{
    display:inline-block;
    cursor:pointer;
    color:#FFFFFF;
    text-transform : uppercase;
    margin: 0 0.5em 0 0.5em;
    font-size:81%;
    text-decoration:none;
    /*line-height:20px; !* bug ie8 *!*/
    line-height:0;
    vertical-align : middle;
}
#accesmenu li a:hover,
#accesmenu li a:focus,
#accesmenu li a:hover strong,
#acces #logout:hover
{
    color:#43a6bf;
}
#accesmenu .current a, #accesmenu .current a:hover,
#accesmenu .current a strong, #accesmenu .current a:hover strong
{
    color: #43a6bf;
    font-weight:bold;
}
#accesmenu li  a strong
{
    font-size:110%;
    color: #873923;
    font-weight:bold;
}

#acces #logout {
    position :absolute;
    top : 10px;
    left : 0;
    color : #ffffff;
    font-size: 81%;
    line-height: 20px;
    margin: 0 0.5em;
    text-decoration: none;
    text-transform: uppercase;
}

.fa + .text {
    margin-left : 3px;
}

#accesmenu li .group_acces {
    position : relative;
    display : inline-block;
    line-height : 40px;
    height : 38px;
    vertical-align : top;
}

#accesmenu li .group_acces .libelle {
    display : inline-block;
}

#accesmenu li .group_acces .link_container {
    visibility : hidden;
    opacity : 0;
    position : absolute;
    top : 38px;
    left : -5px;
    background : #515151;
    text-align : left;
    line-height : 20px;
}

#accesmenu li:hover .group_acces .link_container {
    visibility : visible;
    opacity : 1;
}

#accesmenu li .group_acces .link_container a {
    white-space: nowrap;
    text-align : left;
    padding : 0 5px;
}

/********** BANDEAU ***********/
#bandeau
{
    position:absolute;
    height:90px;
    top : 38px;
    left : 0;
    margin:auto;
    width : 100%;
    z-index : 101;
    /*background-color:#c00;*/
    /*border-bottom : 2px solid #f3f3f3;*/
    background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;

    transition : background-color .3s;
}

#bandeau.sticky {
    position : fixed;
    top : 0;
    background : rgba(0, 0, 0, 0.8);
    width : 100%;
}

#logo
{
    position:absolute;
    top:23px;
    left:44px;
}
#accroche1
{
    position:absolute;
    top:32px;
    left:20px;
    /*border:#e00 1px solid;*/
}
#accroche1 a
{
    display:block;
    background: no-repeat left top;
    width:331px;
    height:62px;
}



/************ Animation bandeau **********/
#slider,
.slideshow {
    width:100%;
    min-width : 1200px;
    height:265px!important;
}

.slideshow.short {
    height : 400px;
}

.slideshow li {
    display : block;
    height : 100%;
    width : 100%;
    position : relative;
    background-size : cover;
    background-position : top center;
}

.slideshow li img {
    display : block;
    position : absolute;
    top : 0;
    left : 0;
    height : auto;
    min-width : 100%;
    min-height : 400px;
}

.slideshow .round {
    background : #46a4be;
    border-radius : 50%;
    width : 160px;
    line-height : 160px;
    vertical-align : middle;
    position : absolute;
    top : 150px;
    left : 10%;
    overflow : hidden;
}

.slideshow .round span {
    position : absolute;
}

.slideshow .text {
    position : absolute;
    top : 150px;
    left : 50%;
    width : 700px;
    margin-left : -350px;
    font-size : 3.4em;
    text-align : center;
    color : #ffffff;
    font-family: 'Raleway', sans-serif;
    font-weight : 300;
    text-transform : uppercase;
    padding-bottom : 80px;

    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.75);
    transition : color .3s ease-in-out;
}

.slideshow.short .text {
    top : 150px;
}

.slideshow .text .highlight {
    color : #ffffff;
}

.slideshow .round [class^="icon-"] {
    display : inline-block;
    font-size : 110px;
    width : 110px;
    height : 110px;
    top : 50%;
    left : 50%;
    margin-left : -55px;
    margin-top : -55px;
    color : #ffffff;
}

.slideshow .button {
    background : transparent;
    border-radius : 0;
    border : 3px solid #ffffff;
    position : absolute;
    top : 400px;
    left : 50%;
    width : 180px;
    height : 50px;
    line-height : 45px;
    margin-left : -90px;
    color : #ffffff;
    font-weight : 300;
    text-transform : uppercase;
    font-family : 'Raleway', sans-serif;
    opacity : 0.9;
    box-shadow: inset 0 0 0 0 #53a7ea;
    text-shadow : none;
    background: rgba(0, 0, 0, 0.4);
    transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.slideshow .text .button {
    top : auto;
    bottom : 0;
    margin-bottom : 0;
}

.slideshow a:hover .button {
    opacity : 1;
    background: #000;
    border: 3px solid #43a6bf;
}

.slideshow .button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;

}

.slideshow .button span:after {
    content: '\00BB';
    position: absolute;
    opacity: 0;
    top: -2px;
    right: -20px;
    transition: 0.5s;
    font-size: 24px;
}

.slideshow .button:hover span {
    padding-right: 25px;
}

.slideshow .button:hover span:after {
    opacity: 1;
    right: 0;
}

#slider
{
    position:relative;
    margin:auto;
    /*border:#e00 1px solid;*/
}

/* JQuery k-animation Photo Slider with Semi Transparent Caption */
.slideshow {
    position:relative;
    list-style:none;
    overflow:hidden;
    margin:0;
    padding:0;
    /*border:#00f 1px solid;
    background-color:#0F0;*/

}

ul.slideshow li {
    margin:0;
    padding:0;
}
/* JQuery k-animation Photo Slider with Semi Transparent Caption */

/*********** LOADER **************/
.pace {
    -webkit-pointer-events: none;
    pointer-events: none;

    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background: #fff;
    height: 3px;
    width: 100%;
    z-index: 101;
    position: fixed;
    bottom : 0px;
    left : 0;
    top: 0;

    transition : top 0.1s ease-in-out;
}

.pace-inactive {

}

.pace .pace-progress {
    background: #46A4BE;
    right: 100%;
    width: 100%;
    z-index: 2000;
    height: 3px;
    position: absolute;
}

.pace.sticky {
    top: 0;
}

/* breadcrumb */

#breadcrumb {
    margin : 15px auto;
}

#breadcrumb a {
    background : rgba(0, 0, 0, 0.3);
    display : inline-block;
    color : #ffffff;
    padding : 6px 5px 5px 5px;
    border-radius : 2px;
    font-size : 10px;
    line-height : 10px;
    text-transform : uppercase;
}

#breadcrumb a:hover {
    background : rgba(0, 0, 0, 0.5);
    color : #ffffff;
}

/*********** CAROUSEL **************/
.bx-wrapper .bx-viewport {
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
    border:none;
    left:auto;
    background:none;
    height: 265px!important;
}
.bx-wrapper { margin-bottom: 40px; z-index : 9; }
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto { bottom: -25px; }

.builder_gallery_content .bx-wrapper { margin : 0;}
.builder_gallery_content .bx-wrapper .bx-pager,
.builder_gallery_content .bx-wrapper .bx-controls-auto { bottom: 10px; }

.builder_gallery_content .bx-wrapper .bx-pager.bx-default-pager a {
    border-radius : 50%;
    margin: 0 3px;
    height : 12px;
    width : 12px;
}

/*********** Extranet **************/

/*Image BG*/
/*#espace_client #header{*/
/*height: 260px;*/
/*}*/

#espace_client .container.aide{
    position: relative;
}

#espace_client h1{
    position: absolute;
    top: -110px;
    left: 0;
    color: #fff;
}

#espace_client .cd-main{
    overflow-y: hidden;
}
#espace_client .img_bg_account{
    height: 240px;
    width: 100%;
    background-size: cover;
    background-position: top center;
}

#espace_client #mh > ul .menu_container > a.current{
    color: #43a6bf;
}
#espace_client #mh > ul > li:hover .menu_container a.current{
    color: #fff;
}
#espace_client #cms{
    margin-top: 75px;
}

/*Login*/
#espace_client .formstyle label.label,
#espace_client .formstyle label.label {
    width: 200px;
}
#login_page #nav_espace_client{
    margin-top: 75px;
}


/*Accueil*/
#espace_client .sep_cate{
    background-color: #E1E1E1;
    height: 1px;
    margin-top: 15px;
    margin-bottom: 20px;
}

/*#espace_client a{
    color: #F1784B;
}*/

#espace_client a:hover,
#espace_client a:active,
#espace_client a:focus {
    color: #544F42;
}

#nav_espace_client .list_menu{
    margin-top: 20px;
}
#nav_espace_client .list_menu .stitle_nav{
    font-style: italic;
    text-align: left;
    font-size: 18px;
    font-weight: 300;
    color: #999;
}
#nav_espace_client .list_menu li{
    text-align: left;
    margin-top: 15px;
}

#nav_espace_client .list_menu li.active a{
    color: #43a6bf;
}

#nav_espace_client .list_menu li a{
    color: #999;
    position: relative;
}

#nav_espace_client .list_menu li.active a span.text::after {
    content: '\00BB';
    position: absolute;
    opacity: 0;
    top: -6px;
    right: -16px;
    transition: 0.3s;
    font-size: 24px;
}

#nav_espace_client .list_menu li:not(.active) a:after{
    content:"Module actif";
    color: #43a6bf;
    font-size: 11px;
    position: absolute;
    bottom: -20px;
    left: 40px;
    opacity: 0;
    transition: 1s;
    width: 130px;
}
#nav_espace_client .list_menu li:not(.active) a:hover:after{
    opacity: 1;
}

#nav_espace_client .list_menu li.active a:hover span::after {
    opacity: 1;
    right: -24px;
}
#nav_espace_client .list_menu .title_dotted{
    border-bottom: 3px dotted #999;
    padding-bottom: 2px;
}

#nav_espace_client .list_menu li .fa {
    font-size: 40px;
    margin-right: 15px;
}

/* Espace client contenu*/
.content_account{
    margin-top: 30px;
}
#account .aide .bordered{
    border-right : 1px solid #D5D5D5;
}
#account .aide .bordered:after {
    content: "";
    height: 1px;
    display: block;
    width: 75%;
    background-color: #E8E7E8;
}
#account #tabs_menu_account{
    margin-bottom: 20px;
}
#account #tabs_menu_account .ui-widget-header {
    border: 0;
    background: transparent;
    border-right : 1px solid #D5D5D5;
}
#account #tabs_menu_account .ui-state-active,
#account #tabs_menu_account .ui-widget-content .ui-state-active,
#account #tabs_menu_account .ui-widget-header .ui-state-active,
#account #tabs_menu_account a.ui-button:active,
#account #tabs_menu_account .ui-button:active,
#account #tabs_menu_account .ui-button.ui-state-active:hover {
    background: #43A6BF;
    color: #fff;
    border: 0;
    width: calc(100% - 20px);
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    background-color: transparent;
    border: 0;
}
#account .account_menu{
}
#account .account_menu li a {
    color: #454545;
    transition: none;
    transition: padding 0.3s ;
}
#account .account_menu li.ui-state-active a,
#account .account_menu .ui-state-active a:link{
    color: #fff;
}
#account #tabs_menu_account.ui-widget.ui-widget-content{
    border: 0;
}
#account #tabs_menu_account .ui-widget-content ul {
    margin-left: 1em;
}
#account .aide #tabs_menu_account .account_menu li {
    margin: 9px 0;

}
#account #tabs_menu_account .ui-widget-content {
    border: 0;
}


/*********** /Extranet **************/

/* PAGER */
.bx-wrapper .bx-pager {	padding-top: 10px; }

.bx-wrapper .bx-pager.bx-default-pager a {
    background: none repeat scroll 0 0 #423e3e;
    border-radius: 0;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
    background: none repeat scroll 0 0 #43a5be;
}

.presta_gallery_content .bx-wrapper .bx-pager.bx-default-pager a:hover,
.presta_gallery_content .bx-wrapper .bx-pager.bx-default-pager a.active {
    background: none repeat scroll 0 0 #000000;
}

.bx-wrapper .bx-next, .bx-wrapper .bx-prev {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #fff;
    width : 100px;
    height : 100%;
    transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}

.bx-wrapper .bx-controls-direction a {
    top : auto;
    bottom : 10px;
    z-index : 100;
}
.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-prev:hover {
    background: #000;
    border: 1px solid #43a6bf;
}
.bx-wrapper .bx-prev:before, .bx-wrapper .bx-next:before {
    content: "\e609";
    font-family: 'kfont';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    color : #fff;
    text-indent : 0;
    position : absolute;
    top : 8px;
    left : 8px;
    width : 16px;
    height : 16px;
    font-size : 16px;
}
.bx-wrapper .bx-prev:before {
    transform : rotate(180deg);
    -ms-transform : rotate(180deg);
    -webkit-transform : rotate(180deg);
}



/***** popin navigation *****/
*::after, *::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.speed,
.gallery li,
.gallery-fiche li,
.gallery-liste li {
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.7s;
    -moz-transition: -moz-transform 0.7s;
    transition: transform 0.7s;
    -webkit-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99);
    -moz-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99);
    transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99);
}

.cd-main {
    position: relative;
    background-color: #fff;


    z-index: 19;
    /* fix bug on iOS */
    /*height: 100vh;*/
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /*padding: 200px 5%;*/
    /* Force Hardware Acceleration in WebKit */
    /*-webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);*/
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: transform 0.7s;
    -moz-transition: -moz-transform 0.7s;
    transition: transform 0.7s;
    -webkit-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99);
    -moz-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99);
    transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99);
}
.navigation-is-open .cd-main {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
}



.cd-nav {
    position: fixed;
    z-index: 20;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    visibility: hidden;
    -webkit-transition: visibility 0s 0.7s;
    -moz-transition: visibility 0s 0.7s;
    transition: visibility 0s 0.7s;
}
#kpop_contain { margin-bottom:20px; }

#kpop_contain img.fullimg { max-height : 80vh; }
#kpop_contain img.fullimg { max-height : calc(100vh - 25vh); }

.cd-nav .cd-navigation-wrapper {
    background-color:#f3f3f3;
    text-align:left;
    /* all navigation content */
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 40px 5% 40px 5%; /* calc(5% + 80px) */
    box-sizing:border-box;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: -webkit-transform 0.7s;
    -moz-transition: -moz-transform 0.7s;
    transition: transform 0.7s;
    -webkit-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
    -moz-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
    transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
}
.navigation-is-open .cd-nav {
    visibility: visible;
    -webkit-transition: visibility 0s 0s;
    -moz-transition: visibility 0s 0s;
    transition: visibility 0s 0s;
}
.navigation-is-open .cd-nav .cd-navigation-wrapper {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
    -moz-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
    transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
}


/* picto */

.cd-nav-trigger {
    display:inline-block;
    margin-bottom:2em;
    /*position: fixed;
    left: 5%;
    top: 50px;*/
    cursor:pointer;
    z-index: 50;
    height: 54px;
    width: 54px;
    background-color: #43a6bf;
    border-radius: 50%;
    /* image replacement */
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    -webkit-transition: -webkit-transform 0.5s, background-color .2s ease-in;
    -moz-transition: -moz-transform 0.5s, background-color .2s ease-in;
    transition: transform 0.5s, background-color .2s ease-in;
}
.cd-nav-trigger:hover,
.cd-nav-trigger:focus {
    background-color: #1d1d1d;
}
.cd-nav-trigger .cd-nav-icon {
    /* icon created in CSS */
    /* Hamburger */
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 22px;
    height: 2px;
    background-color: #ffffff;
}
.cd-nav-trigger .cd-nav-icon::before,
.cd-nav-trigger .cd-nav-icon:after {
    /* Hamburger */
    /* upper and lower lines of the menu icon */
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: inherit;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.5s, width 0.5s, top 0.3s;
    -moz-transition: -moz-transform 0.5s, width 0.5s, top 0.3s;
    transition: transform 0.5s, width 0.5s, top 0.3s;
    /* Flèche */
    width: 50%;
}
.cd-nav-trigger .cd-nav-icon::before {
    /* Hamburger */
    -webkit-transform-origin: right top;
    -moz-transform-origin: right top;
    -ms-transform-origin: right top;
    -o-transform-origin: right top;
    transform-origin: right top;
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    -o-transform: translateY(-6px);
    transform: translateY(-6px);
    /* Flèche */
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.cd-nav-trigger .cd-nav-icon::after {
    /* Hamburger */
    -webkit-transform-origin: right bottom;
    -moz-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    -o-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translateY(6px);
    -moz-transform: translateY(6px);
    -ms-transform: translateY(6px);
    -o-transform: translateY(6px);
    transform: translateY(6px);

    /* Flèche */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/*.no-touch .cd-nav-trigger:hover .cd-nav-icon::after,
.no-touch .cd-nav-trigger:focus .cd-nav-icon::after,
.no-touch .cd-nav-trigger:hover .cd-nav-icon::before,
.no-touch .cd-nav-trigger:focus .cd-nav-icon::before {
   Flèche
   width: 60%;
}*/

.no-touch .cd-nav-trigger:hover .cd-nav-icon::after {
    /* Hamburger */
    /*top: 2px;*/
}
.no-touch .cd-nav-trigger:hover .cd-nav-icon::before {
    /* Hamburger */
    /*top: -2px;*/
}
.cd-nav-trigger svg {
    position: absolute;
    top: 0;
    left: 0;
}
/*
.cd-nav-trigger circle {
   circle border animation
  -webkit-transition: stroke-dashoffset 0.4s 0s;
  -moz-transition: stroke-dashoffset 0.4s 0s;
  transition: stroke-dashoffset 0.4s 0s;
}*/
.navigation-is-open .cd-nav-trigger {
    /* rotate trigger when navigation becomes visible */
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.navigation-is-open .cd-nav-trigger .cd-nav-icon::after,
.navigation-is-open .cd-nav-trigger .cd-nav-icon::before {
    /* animate arrow --> from hamburger to arrow */
    width: 50%;
    -webkit-transition: -webkit-transform 0.5s, width 0.5s;
    -moz-transition: -moz-transform 0.5s, width 0.5s;
    transition: transform 0.5s, width 0.5s;
}
.navigation-is-open .cd-nav-trigger .cd-nav-icon::before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.navigation-is-open .cd-nav-trigger .cd-nav-icon::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.no-touch .navigation-is-open .cd-nav-trigger:hover .cd-nav-icon::after, .no-touch .navigation-is-open .cd-nav-trigger:hover .cd-nav-icon::before {
    top: 0;
}
/*
.navigation-is-open .cd-nav-trigger circle {
  stroke-dashoffset: 0;
  -webkit-transition: stroke-dashoffset 0.4s 0.3s;
  -moz-transition: stroke-dashoffset 0.4s 0.3s;
  transition: stroke-dashoffset 0.4s 0.3s;
}
*/




/* no-js */

.no-js main {
    height: auto;
    overflow: visible;
}

.no-js .cd-nav {
    position: static;
    visibility: visible;
}
.no-js .cd-nav .cd-navigation-wrapper {
    height: auto;
    overflow: visible;
    padding: 100px 5%;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}





/***** PAGE *****/

#contenu
{
    margin:auto;
    padding: 0;
    min-height:430px;

    position : relative;
    z-index : 2;
    background : #ffffff;
    transform : translateZ(0);
    -webkit-transform : translateZ(0);
}

#footer_compensation {
    height : 270px;
}

#contenu > section {
    position : relative;
}

/**** COLONNE ***/
#colonne1
{
    position:relative;
    float: left;
    width: 245px; /* largeur ie dans ie.css du a text-align:justify dans #contenufond p */
    margin-right: 10px; /* bug de 3px dans ie 6 avec les flottant modif dans ie.css */
    padding:15px 0 10px 0;
    /*background: burlywood;*/
}
#colonne2
{
    position:relative;
    float: right;
    width: 245px; /* largeur ie dans ie.css du a text-align:justify dans #contenufond p */
    margin-left: 10px; /* bug de 3px dans ie 6 avec les flottant modif dans ie.css */
    padding:15px 0 10px 0;
    /*background: burlywood;*/
}

.container .main_column {
    width : 66%;
    float : left;
}

.container .second_column {
    width : 31%;
    float : left;
    margin-left : 3%;
}

.simple_presentation {
    padding : 2em 0;
}
/**** CONTENT ***/
#bloc
{
    position:static; /* indispensable */
    overflow: hidden; /* établi un contexte de formatage qui l'empeche de glisser sous les colonne 1 et 2 */
    margin:0 0 0 0;
    padding:0 0 10px 0;
    /*background: #f03;*/
}
#conteneur /* utile car #bloc position static */
{
    position:relative;
    margin:20px 20px;
    text-align:justify;
}
p
{
    margin: 0.8em 0 0.8em 0;
}

/********** MENU ***********/
/********** MENU HAUT ***********/

#topmenu_container {
    width : 100%;
    height : 38px;
    line-height : 38px;
    background : rgba(0, 0, 0, 100);
    position : absolute;
    top : 0;
    left : 0;
    z-index : 100;
}

#topmenu_container:hover {
    z-index : 102;
}

#mh
{
    /*width:880px;*/
    margin:auto;
    height:100px;
    line-height : 100px;
    text-align : right;
    font-family: 'Raleway', sans-serif;
}

#mh > ul
{
    list-style:none;
    margin: 0;
    height : 100px;
    line-height:100px;
    vertical-align : top;
    text-align : right;
    display : inline-block;
}

#mh > ul > li {
    display : block;
    float : left;
    height : 100px;
    line-height:100px;
}
#mh > ul .menu_container
{
    /*float:left;*/
    display:block;
    float : left;
    color:#ffffff;
    font-weight : 700;
    min-height : 1.5em;
    max-height : 1.5em;
    vertical-align : middle;
    line-height:1.5em;
    font-size : 1em;
    margin : 2.375em 0;
    position : relative;
    text-align : left;
    z-index: 100
    /*animation : menuOut .1s;
    -webkit-animation : menuOut .1s; */
    /*transition : height .2s ease-in-out, margin .2s ease-in-out;*/
}

#mh > ul .menu_container > a
{
    color:#ffffff;
    padding:0 15px 0 15px;
    display: block;
    cursor:pointer;
    text-transform : uppercase;
    font-size : 1em;
    height : 1.5em;
    vertical-align : middle;
    text-align : left;
    /*animation : menuLinkOut .1s;
    -webkit-animation : menuLinkOut .1s;*/

    /*transition : all .2s ease-in-out;*/
}

#mh > ul .menu_container .submenu {
    font-weight : 400;
}

#mh a span
{

}
#mh a:hover, #mh a:focus
{
    /*
    color:#E0DDD5;
    background-color:#878377;
    */
}

/*
#mh > ul > li.current > a {
	height : 100px;
	line-height : 100px;
	border-bottom : 2px solid #43a6bf;
}
*/

#mh > ul > li:hover .menu_container {
    min-height : 100px;
    max-height : 500px;
    background : #43a6bf;
    margin : 0;
    padding:0 0 0 10px;
    animation : menuIn .5s ease-out;
    -webkit-animation : menuIn .5s ease-out;
    /* transition : all 0.3s; */
}

#mh > ul > li:hover .menu_container > a {
    color : #ffffff;
    padding : 0 150px 0 0;
    margin: 2.375em 0 0.2em 0;
    animation : menuLinkIn .5s ease-out;
    -webkit-animation : menuLinkIn .5s ease-out;
    /* transition : all 0.3s; */
}

#mh > ul > li {
    position : relative;
}

#mh .submenu {
    visibility : hidden;
    opacity : 0;
    font-size : 0.8em;
    line-height : 1.5em;
    color : #ffffff;
    text-align : left;
    transform : translateX(50px);
    max-width : 100%;
    /* display : none; */
    padding-bottom : 10px;
    position : relative;
    margin: 0.5em -50px 0.5em 0;
}

#mh #mh00 .submenu {

}

#mh .sub-submenu {
    visibility : hidden;
    opacity : 0;
    font-size : 0.9em;
    line-height : 1.5em;
    color : #ffffff;
    text-align : left;
    transform : translateX(50px);
    max-width : 100%;
    display : none;
    margin : 0.3em 0;
    padding-left : 1em;
}

#mh .submenu li {
    margin : 0;
    display : block;
}

#mh .submenu a {
    color : #ffffff;
    opacity : 1;
    white-space: nowrap;
    text-transform : uppercase;
    font-weight : 700;
    display : block;

    transition : opacity 0.2s ease-in-out;
}

#mh > ul > li:hover .submenu {
    animation : submenuIn .5s;
    -webkit-animation : submenuIn .5s;
    visibility : visible;
    opacity : 1;
    transform : translateX(0px);
    display : block;
}

#mh > ul > li:hover .sub-submenu {
    animation : submenuIn .5s;
    -webkit-animation : submenuIn .5s;
    animation-delay : .1s;
    -webkit-animation-delay : .1s;
    visibility : visible;
    opacity : 1;
    transform : translateX(0px);
    display : block;
}

#mh .submenu a:hover {
    opacity : 0.8;
}

/* icon menu rules */

#mh .submenu li .icon_container {
    display : inline-block;
    height : 4em;
    width : 4em;
    line-height : 3.6em;
    text-align : center;
    vertical-align : middle;
    background : #ffffff;
    border-radius : 50%;
    margin : 0.5em 1em 0.3em 0;
}

#mh .submenu li .icon_container svg {
    display : inline-block;
    line-height : 1;
    vertical-align : middle;
}

#mh .submenu li.i-web > a > span:before {
    /* content: "\e601"; */
}

/* mobile menu */

.burger_menu {
    background : transparent;
    border-radius : 50%;
    width : 3em;
    height : 3em;
    line-height : 2.8em;
    display : block;
    cursor : pointer;
    text-align : center;
    position : relative;
}

.close_menu {
    background : #ededed;
    width : 100%;
    height : 50px;
    display : block;
    cursor : pointer;
    text-align : right;
    position : absolute;
    top : 0;
    left : 0;
    z-index : 200;
}

.close_menu#return_site {
    position : absolute;
    display : block;
    width : 100%;
    height : 100%;
    left : 0;
    top : 0;
    background : transparent;
    z-index : 1;
    cursor : default;
}

.close_menu .text {
    line-height : 48px;
    text-align : right;
    text-transform : uppercase;
    font-weight : 700;
    font-size : 12px;
    margin-right : 50px;
}

.close_menu:hover {
    background : #F1784B;
}

.icon-menu_dyn:before {
    top: 0.5em;
}
.icon-menu_dyn:after {
    top: -0.5em;
}
.icon-menu_dyn:before, .icon-menu_dyn:after, .icon-menu_close:before, .icon-menu_close:after {
    background: none repeat scroll 0 0 #ffffff;
    content: "";
    display: inline-block;
    height: 3px;
    left: 0;
    position: absolute;
    transform-origin: 0.401786em center 0;
    -ms-transform-origin: 0.401786em center 0;
    -webkit-transform-origin: 0.401786em center 0;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    width: 1.5em;
}

.icon-menu_close:before, .icon-menu_close:after {
    background: none repeat scroll 0 0 #000000;
}

.icon-menu_dyn, .icon-menu_close {
    background: none repeat scroll 0 0 #ffffff;
    display: inline-block;
    height: 3px;
    line-height: 36px;
    position: relative;
    transition: all 0.3s ease-in-out 0s;
    vertical-align: middle;
    width: 1.5em;
}

.icon-menu_close {
    position : absolute;
    bottom : 25px;
    right : 20px;
}

.icon-menu_close:before {
    height: 4px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.icon-menu_close:after {
    height: 4px;
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.icon-menu_close:before, .icon-menu_close:after {
    top: 0;
    transform-origin: 50% 50% 0;
    -ms-transform-origin: 50% 50% 0;
    -webkit-transform-origin: 50% 50% 0;
}
.icon-menu_close {
    background: none repeat scroll 0 0 transparent;
}

.burger_menu:hover .icon-menu_dyn:before {
    top: 0.3em;
    background  : #F1784B;
}

.burger_menu:hover .icon-menu_dyn:after {
    top: -0.3em;
    background  : #F1784B;
}

.burger_menu:hover .icon-menu_dyn {
    background  : #F1784B;
}

/********** MENU BAS ***********/
#mb
{
    /*width:880px;*/
    margin:auto;
    height:20px;
    background-color:#9C9587;
}
#mb ul
{
    list-style:none;
    margin: 0 0 0 1em;
    line-height:20px;
}
#mb ul li
{
    /*float:left;*/
    display:inline;
    color:#C7C2B7;
    margin:0;
}
#mb a
{
    color:#E0DDD5;
    padding:0 16px 0 16px;
    display:inline-block;
}
#mb a span
{
}
#mb a:hover, #mb a:focus
{
    color:#E0DDD5;
    background-color:#878377;
}
#mb .current a, #mb .current a:hover
{
    color:#E0DDD5;
    background-color:#5C584D;
}

/* haut de page */

#sticky_top {
    position : fixed;
    bottom : 9vw;
    right : 10vw;
    z-index : 100;
}

#sticky_top.isMobile {
    display : none;
}

#sticky_top a {
    width : 2em;
    height : 2em;
    display : block;
    border-radius : 50%;
    background : rgba(70, 165, 190, 0.5);
    color : #ffffff;
    text-align : center;
}

#sticky_top a .icon-long-arrow {
    display : block;
    width : 1em;
    height : 1em;
    margin : 0.5em;
    transform : rotate(-90deg);
    transform-origin : 50% 50%;
    -ms-transform : rotate(-90deg);
    -ms-transform-origin : 50% 50%;
    -webkit-transform : rotate(-90deg);
    -webkit-transform-origin : 50% 50%;
    text-align : center;
    vertical-align : middle;
    line-height : 1em;
}

/******* PIED PAGE ********/
/*******   FOOTER  ********/
/* Style pied page */

.footer {
    margin:0 auto;

    text-align: left;
    line-height: 20px;
    color: #859195;
    background : #242a2c;
    width : 100%;
    min-height : 270px;
    bottom : 0;
    left : 0;
    z-index : 1;
}
.footer .grid_25 {
    text-align : left;
}

.footer #logo_footer {
    margin-top : 1.5em;
    width : calc(100% - 20px);
}

.footer a:not(.button) {
    font-size: 0.875em;
    color: #859195;
    font-weight: normal;
    text-decoration: none;
    Padding: 0;
    cursor: pointer;
}
.footer a:not(.button):hover, .footer a:not(.button):focus {
    color: #544F42;
}

.footer .social_container {
    height : 45px;
    line-height : 45px;
    background : #43a5be;
    text-align : center;
}

.footer .social_container .icon_footer {
    width : 30px;
    height : 30px;
    border-radius : 50%;
    display : inline-block;
    margin : 0 0.2em;
    background : #ffffff;
    color : #FF7B00;
    border : 2px solid #ffffff;
}


.footer .social_container .icon_footer:hover span {
    color : #ffffff;

}

.footer .social_container .icon_footer.fb:hover,
.footer .social_container .icon_footer.twitter:hover,
.footer .social_container .icon_footer.viadeo:hover,
.footer .social_container .icon_footer.linkedin:hover {
    background : transparent;
}

.footer .social_container .icon_footer span {
    width : 16px;
    height : 16px;
    font-size : 16px;
    margin : 5px;
    line-height : 1em;
    display : block;
    transition : color .2s ease-in-out;
}

.footer .current a:not(.button), .footer .current a:not(.button):hover
{
    color:#0075b0;
    font-weight:500;
    background-color:#e3e3e3;
    -moz-border-radius:3px;
    border-radius:3px;
    /*background-position: 5px -26px;*/
    padding : 1px 3px;
}

.footer .title {
    color : #ffffff;
    text-transform : uppercase;
    font-family : 'Raleway', sans-serif;
    position : relative;
    display : inline-block;
    margin-top : 2em;
    height : 1em;
    font-size : 14px;
    font-weight : 700;
}

.footer .title:before {
    content : '';
    width : 1.5em;
    height : 2px;
    background : #43a6bf;
    position : absolute;
    bottom : -10px;
    left : 0;
}

.footer p{
    font-family : 'Lato', sans-serif;
    font-size : 0.8em;
    line-height : 1.2em;
    font-weight : 300;
    color : #e8e7e8;
}

.footer p.highlight {
    font-size : 1em;
}

.footer #footer_contact p.highlight a {
    color : #f1784b;
}

.footer li {
    line-height : 1.2em;
    margin-left : 0;
    color : #e8e7e8;
}

.footer .footer_low {
    min-height : 30px;
    position : relative;
}

.footer .keyword-footer { font-size:10px; line-height:1.3; margin-top:0.5em; }
.footer .keyword-footer a:hover,
.footer .keyword-footer a:focus { text-decoration:underline; }

.footer .button.btn1 {
    background:#333;
    width:150px;
}

.footer .button.btn1 .fa {
    font-size : 14px;
    line-height : 1.2em;
    margin-left : 5px;
}

.blocfooter
{
    float:left;
    min-width:125px;/**/
    margin:1.5em 2.5em 0 2em;
}
.sepfooter
{
    float:left;
    width:9px;
    height:140px;
    border-left:1px dotted #ccc;
}


#visuelpaiement
{
    width:171px;
    height:30px;
    background:url(../img/paiement.securise.cb.visa.mastercart.png) no-repeat right top;
}
#visuelpaiement span
{
    display:none;
}



/*** MOTS BAS PAGE ***/

#mots
{
    margin:auto;
    text-align:justify;
    line-height: 9px;
}


/* MOTS REF */
.ref, .ref a, .ref a:link, .ref a:visited {
    color: #bbb;
    font-size: 10px;
    letter-spacing: 0;
    text-decoration: none;
    text-align: justify;
    /*font-weight: normal;*/
    display:inline;
}
.ref a:hover, .ref a:focus {
    color: #666;
    /*font-weight:normal;
    font-size: 10px;*/
    letter-spacing: 0;
}

/*** SIGNATURE KYXAR ***/
.footer .kyxar
{
    position: absolute;
    z-index:10;
    white-space: nowrap;
    right:0;
    padding: 5px 0 3px 0;
    font-size : 9px;
    bottom : 20px;
}

.footer .kyxar a
{
    color: #f1784b;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    letter-spacing: 1px;
}

.kyxar a.hoverkyxar {
    display : none;
    position : absolute;
    top : -10px;
    right : 0;
    color : #ffffff;
    font-size : 10px;
}

.kyxar a.lienkyxar:hover + a.hoverkyxar {
    display : block;
}

.kyxar a:hover
{
    color: #666;
}


/*** POPUP ZOOM ****/
#pagezoom
{ /* config zoom.php */
    margin: 0;
    /*background-position: center center;*/
}
#pagezoom .titrezoom,
.navzoompopup
{
    color:#000;
}
.navzoompopup
{
    text-align:left;
    margin:0.3em 0 0.3em 3em;
}

#pagezoom .titrezoom
{
    letter-spacing: 1px;
    font-size: 14px;
    font-weight: bold;
    margin-top:0.8em;
    display:block;
}
#pagezoom .imgzoom img
{
    border:#e3ddc3 1px solid;
    background-color:#fff;
    padding:8px;
}

#pagezoom #menu1Container
{ /* page zoom */
    position:relative;
}
#planzoom
{
    position:relative;
    margin:50px auto;
    text-align:left;
    width:80%;
}
#pagezoom #mots
{
    width:95%;
    margin-top:2em;
}

/******* Bloc projet *******/

#proj_accordion {
    list-style: none;
    margin: 2em 0;
    padding: 0;
    height: 110px;
    width : 100%;
    /*overflow: hidden;*/
    background: #43a5be;
}

#proj_accordion > li {
    float : left;
    display : block;
    height : 110px;
    width : 50px;
    padding : 0;
    margin : 0;
    /*overflow : hidden;*/
    color : #fff;
    text-decoration : none;
    font-size : 16px;
    line-height : 100px;
}

#proj_accordion > li .separator {
    float: left;
    margin: 0;
    width : 50px;
    height : 100%;
    background : rgba(255, 255, 255, 0.3);
    position : relative;
    text-align : center;
    cursor: pointer;
}

#proj_accordion > li.active {
    width: calc(100% - 106px);
}

#proj_accordion > li.active .separator {
    margin-right : 20px;
}

#proj_accordion > li.active .separator:after {
    content : '';
    display : block;
    position : absolute;
    top : 50%;
    right : -10px;
    height : 0;
    width : 0;
    border-width : 10px 0 10px 10px;
    margin : -10px 0 0 0;
    border-style : solid;
    border-color : transparent transparent transparent rgba(255, 255, 255, 0.3);
}

#proj_accordion > li {
    margin : 0 1px;
    position : relative;
    transition : all 0.2s ease-in-out;
}

#proj_accordion .content {
    position : relative;
    width : 0;
    display: none;
    margin-left: 50px;
    border-bottom: 1px dotted #7bc0d2;
    border-top: 1px dotted #7bc0d2;
    min-height: 110px;
}

#proj_accordion > li.active .content {
    width : auto;
    display: block;
}

#proj_accordion .btn3 {
    position : absolute;
    top : 35px;
    right : 10px;
}

#proj_accordion .btn3 input{
    background: none;
    border: none;
    color: #fff;
}

#proj_accordion .form-coord{
    display: inline-block;
    position: absolute;
    top: 24px;
}

#proj_accordion  input{
    min-height : 32px;
}

#proj_accordion .form-coord input{
    margin: 0 10px;
}

#proj_accordion .form-coord > input{
    margin-bottom: 10px;
}

#proj_accordion .selectric-wrapper {
    display: inline-block;
    line-height: 1.2em;
    margin-bottom: 5px;
    position: relative;
    vertical-align: middle;
}

#proj_accordion .aheight {
    max-width : calc(100% - 120px);
    line-height : 2.5
}


/***** CONTACT *****/

#formcontact, .formcontact
{
    /*position:relative;
    top:0;
    left:0;
    height:1%;*/
}
#titretd1, #titretd2
{
    width:12em;
}
.donnes1, .donnes2
{
    /*position:relative;*/
    margin: auto auto 0.5em;
}
.donnes1
{ /* positionnement données form gauche */
    /* float:left; */
    left:0;

}
.donnes2
{ /* positionnement données form droite */
    /* float:right; */
    right:0;
    /*margin-right:-3em;*/
    /*padding-left:0.7em;*/
}


.donnes1 table, .donnes2 table
{
    /*margin:auto; /* margin:auto fait planté ie 6 dans certain cas */
}

#formcontact, .formcontact
{
    margin: auto auto auto 0;
}
#formcontact legend, .formcontact legend
{
    padding-left:0;
    margin-bottom:0.5em;
}
#formcontact label span, .formcontact label span
{ /* *obligatoire */
    color:#B05737; /* bb0d1e */
    font-weight:bold;
}
.submit
{
    width:250px;
    height:46px;
    display:inline-block;
    margin-right:12px;
}
.submit:hover
{

}

/* contact */

input.normal, input.focus,
textarea.normal, textarea.focus
{
    width:300px;
    padding:5px 10px;
}

.checkboxform, .inputform
{ /* config txt dans .txt dans form plus bas*/
    line-height:2em;
    font-weight:bold;
}
.checkboxform span
{
    display:block;
    float:left;
    width:17em;
}
.inputform .spanform
{
    display:block;
    float:left;
    width:21em;
}


/* HOME PAGE */

/* slide activités */

section.activity {
    padding : 10px 0 0 0;
}

#activity_list li {
    width : 240px;
    float : left;
    margin : 0;
    padding : 10px;
    position : relative;
}

#activity_list li a {
    display : block;
}

#activity_list .img_container {
    position : relative;
}

.img-wrapper {
    overflow : hidden;
}

#activity_list .img_container img {
    display : block;
    width : 100%;
    transform : scale(1);

    transition : transform .5s ease-in-out;
}

#activity_list .picto {
    width : 30%;
    background : #ffffff;
    margin : 0;
    position : absolute;
    left : 35%;
    bottom : -20%;
    z-index : 10;
    -webkit-box-shadow: 0px 0px 0px 4px rgba(243, 243, 243, 1);
    -moz-box-shadow:    0px 0px 0px 4px rgba(243, 243, 243, 1);
    box-shadow:         0px 0px 0px 4px rgba(243, 243, 243, 1);

    transition : all .2s ease-in-out;
}

#activity_list .picto [class^="icon-"] {
    position : absolute;
    top : 20%;
    left : 0;
    color : #ffffff;
    width : 100%;
    height : 100%;
    text-align : center;
    vertical-align : middle;
    font-size : 1.6em;
    transition : all .2s ease-in-out;
}

#activity_list .picto svg {
    position : absolute;
    top : 10%;
    left : 10%;
    width : 80%;
    height : 80%;
    text-align : center;
    vertical-align : middle;
    transition : all .2s ease-in-out;
}

#activity_list .picto.telecom svg {
    top: -26%;
    left: -11%;
    width: 130%;
    height: 130%;
}

#activity_list .text_container {
    font-family : 'Raleway', sans-serif;
    color : #737c85;
    padding : 0 8%;
    border-left : 1px solid #e6eaee;
    height : 280px;
}

#activity_list .text_container .title {
    font-size : 1em;
    margin-top : 2.5em;
    display : block;
    height : 2em;
    font-weight : 700;
    transition : color .2s ease-in-out;
}

#activity_list .text_container  p {
    font-size : 0.8em;
    line-height : 1.4em;
    text-align : justify;
}

#activity_list .text_container .button {
    display : block;
    margin : 20px 0;
    width : 120px;
    position : absolute;
    bottom : 0;
    left : 50%;
    margin-left : -60px;
}

#activity_list .text_container .button .fa {
    font-size : 14px;
    line-height : 1.2em;
    margin-left : 3px;
}

#activity_list a:hover .text_container .button {
    background : #ff7b00;
    color : #ffffff;
}

#activity_list li a:hover {
    -webkit-box-shadow: 0px 0px 0px 10px rgba(70, 165, 190, 1);
    -moz-box-shadow:    0px 0px 0px 10px rgba(70, 165, 190, 1);
    box-shadow:         0px 0px 0px 10px rgba(70, 165, 190, 1);
}


#activity_list li a:hover .picto {
    -webkit-box-shadow: 0px 0px 0px 4px rgba(70, 164, 190, 1);
    -moz-box-shadow:    0px 0px 0px 4px rgba(70, 164, 190, 1);
    box-shadow:         0px 0px 0px 4px rgba(70, 164, 190, 1);
    background : #ffffff;
}

#activity_list li a:hover .picto [class^="icon-"] {
    color : #46a4be;
}

#activity_list a:hover .text_container .title {
    color : #46a4be;
}

#activity_list a:hover .img_container img {
    transition : transform 5s;
    transform : scale(1.4);
}

/* slide news */

#anchor_news {
    background-image : url(../img/blur_image_4.jpg);
    background-size : cover;
    background-position : 50% 50%;
}

#anchor_news h2,
#anchor_news h2 a,
#other_news h2, #other_news h1 {
    color : #ffffff;
}

#other_news .archives {
    color : #ffffff;
}
#other_news .archives a:hover, #other_news .archives a.current{
    color : #ffffff;
}

.news_container.newdesign .news_item {
    width : 250px;
    display : inline-block;
    background : #ffffff;
    border-radius : 5px;
    overflow : hidden;
    margin : 0 20px 20px 20px;
}

.news_container {
    margin : 2em 0;
}

.news_container.newdesign {
    text-align : center;
}

.news .img_container, .news .text_container {
    float : left;
    position : relative;
}

.news .img_container {
    margin-right : 4%;
}

.news .img_container img {
    display : block;
    width : 100%;
}

.news .main_news .img_container {
    width : 36%;
    height : 230px;
}

.news .newdesign .main_news .img_container {
    width : 100%;
    height : auto;
}

.news .main_news .img_container .date {
    width : 40px;
    height : 45px;
    position : absolute;
    bottom : 0;
    left : 0px;
    background : rgba(67, 165, 190, 0.7);
}

.news .main_news .text_container {
    max-width : 60%;
    height : 230px;
}

.news .newdesign .main_news .text_container {
    max-width : 100%;
    height : 230px;
    text-align : left;
    padding : 10px;
}

.news .text_container .title h3 {
    font-family: 'Roboto Slab', serif;
    color : #626262;
    margin : 0;
}

.news .main_news  .text_container .title h3 {
    font-size : 1.5em;
}

.news .date {
    color : #43a5be;
    font-weight : 400;
    text-transform : uppercase;
}

.news .main_news .date {
    color : #000000;
    font-size : 0.75em;
}

.news .date .day,
.news .date .month {
    display : block;
    text-align : center;
}

.news .date .day {
    font-size : 4em;
    font-weight : 400;
    margin : 5px 0;
}

.news .date .month {
    color : #ffffff;
}

.news .main_news .date .day {
    font-size : 1.2em;
    color : #ffffff;
    font-weight : 300;
    margin : 5px 0;
}

.news .second_news .text_container .date {
    font-size : 0.7em;
}

.news .text_container p {
    margin : 1em 0;
    font-weight : 300;
    color : #626262;
}

.news .second_news .text_container p {
    font-size : 0.9em;
    margin : 0.3em 0;
}

.news .text_container .button {
    position : absolute;
    bottom : 0;
    right : 10px;
}

.news .newdesign .text_container .button {
    position : absolute;
    bottom : 10px;
    right : 50%;
    margin-right : -60px;
}

.news .second_news .text_container .button {
    left : auto;
    right : 0;
}

.news .text_container .button span {
    vertical-align : middle;
}

.news .text_container .button .text {
    margin-right : 10px;
}

.news .second_news {
    border : 1px solid #f3f3f3;
    padding : 5px;
}

.news .second_news + .second_news {
    margin-top : -1px;
}

.news .second_news .img_container {
    width : 17%;
    height : 115px;
}

.news .second_news .text_container {
    max-width : 79%;
    height : 115px;
}

/* page news */
.news-current{
    margin: 20px 0 60px;
}

.news-current .header{
    margin-bottom: 10px;
}

.news-current h2,
.news-current .h2 {
    margin-bottom: 5px;
}

.news-current .date{
    font-size: 13px;
    background : #43A5BE;
    border-radius : 3px;
    color : #ffffff;
    padding : 2px 5px;
    margin : 5px 0;
}

.news-current .news-img{
    float: left;
    margin: 0;
    width : 100%;
}

.news-list{
    margin-bottom: 40px;
}

.news-list .img_container, .news .text_container {
    float : left;
    position : relative;
}

.news-list .img_container {
    margin-right : 4%;
}

.news-list .img_container img {
    display : block;
    width : 100%;
}

.news-list .date {
    color : #43a5be;
    font-weight : 400;
    text-transform : uppercase;
}

.news-list .date .day,
.news-list .date .month {
    display : block;
    text-align : center;
}

.news-list .date .day {
    font-size : 4em;
    font-weight : 400;
    margin : 5px 0;
}

.news-list .date .month {
    color : #929ba0;
}

.news-list .news-bloc{
    margin-bottom: 30px;
}

.news-list .news-bloc .date .day {
    font-size : 1.2em;
    color : #f1784b;
    font-weight : 300;
    margin : 5px 0;
}
.news-list .news-bloc .date {
    color : #ffffff;
    font-size : 0.75em;
}

.news-list .news-bloc .text_wrapper {
    height : 80px;
}

.news-list .news-bloc  .text_container .title h3 {
    font-size : 1.5em;
}

.news-list .news-bloc .text_container {
    max-width : 90%;
}

.news-list .text_container p {
    margin : 1em 0 0.5em;
    font-weight : 300;
    color : #626262;
}

.news-list .text_container .button {
    float: right;
}

.news-list .news-bloc .img_container .date {
    width : 40px;
    height : 45px;
    position : absolute;
    top : 0;
    left : 20px;
    background : rgba(62, 62, 62, 0.7);
}

.news-list .news-bloc .img_container {
    width : 20%;
    height: 120px;
    overflow: hidden;
}

.news-list .img_container .date-big .day {
    font-size : 4em;
}

.news-list .img_container .date-big .month {
    font-size : 1.5em;
}

.other_news {
    background : #3A606C;
    padding : 20px 0 50px 0;
}


.slide_realisation {
    min-height : 400px;
    width : 100%;
    margin : 2em 0;
}

#rassurance_list, #customer_list {
    margin : 2em 0;
}

#rassurance_list li {
    float : left;
    width : 300px;
    margin : 0;
    text-align : center;
}

#customer_list {
    background : rgba(26, 23, 27, 0.1);
    margin : 2em 0 0 0;
    text-align : center;
    padding : 2em 0;
}

#customer_list ul {
    margin : 0;
}

#customer_list li {
    width : 150px;
    display : inline-block;
    margin : 0;
}

#rassurance_list li a {
    display : block;
}

#rassurance_list li [class^="icon-"] {
    color : #46a4be;
    font-size : 2em;
}

#rassurance_list li .title {
    margin : 2em 0 1em 0;
    text-align : center;
    font-family: 'Roboto Slab', serif;
    color : #3f4244;
    font-weight : 700;
}

#rassurance_list li .bar {
    height : 2px;
    width : 30%;
    margin : 0 auto;
    background : #46a4be;
    transition : width 0.3s ease-in-out;
}

#rassurance_list li p {
    font-size : 0.85em;
    width : 60%;
    margin : 1em auto;
    font-weight : 300;
    color : #929ba0;
}

#rassurance_list li a:hover .bar {
    width : 60%;
}

#footer_map {
    height : 400px;
}

.popmap_info {
    text-align : center;
    color : #ffffff;
    font-weight : 700;
    font-size : 1.2em;
    font-family : 'Raleway', sans-serif;
}

.popmap_info .t1 {
    font-size : 1.5em;
}

.popmap_info img {
    top : 10px;
    right : 10px;
}

.overlay_mask {
    background : #000;
}

/* slide call project */

section#call_project {
    background:#e8faff;
}

li.slide {
    margin : 0;
}

.presta_gallery {
    text-align : center;
}

.presta_gallery li {
    width : 300px;
    display : inline-block;
    margin : 20px 0;
}

.presta_gallery li a,
.presta_gallery li .rond {
    width : 200px;
    height : 200px;
    margin : 0 50px;
    border-radius : 50%;
    background : #ffffff;
    text-align : center;
    display: inline-block;
    position: relative;
    color : #000000;

    transition : all 0.2s ease-in-out;
    -ms-transition : all 0.2s ease-in-out;
    -webkit-transition : all 0.2s ease-in-out;
}

.presta_gallery li a:hover {
    -webkit-box-shadow: 0px 0px 0px 30px rgba(255,255,255,0.2);
    -moz-box-shadow: 0px 0px 0px 30px rgba(255,255,255,0.2);
    box-shadow: 0px 0px 0px 30px rgba(255,255,255,0.2);
}

.presta_gallery li a:hover img {
    transform : scale(1.2);
}

.presta_gallery li a img,
.presta_gallery li a .islide_content,
.presta_gallery li .rond img,
.presta_gallery li .rond .islide_content {
    display : inline-block;
}

.presta_gallery li a img,
.presta_gallery li .rond img {
    max-width : 100px;
    margin-top : 30px;

    transition : all 0.3s ease-in-out;
    -ms-transition : all 0.3s ease-in-out;
    -webkit-transition : all 0.3s ease-in-out;
}

.presta_gallery li a .islide_content,
.presta_gallery li .rond .islide_content {
    max-width : 150px;
    font-size : 14px;
    font-weight : 700;
}

.presta_gallery li a .islide_content p,
.presta_gallery li .rond .islide_content p {
    text-align : center;
}

.presta_gallery li a .islide_content,
.presta_gallery li .rond .islide_content {

}

/* slide call to contact */

section.callto_contact {
    height : 350px;
    background : url(../img/slide.question.jpg);
    background-size : cover;
    background-position : center center;
    position : relative;
    background:#43a5be;
}

section.callto_contact .title {
    text-align : center;
    color : #fff;
    font-weight : 700;
    font-size : 2em;
    margin-top : 120px;
}

section.callto_contact a.call_action {
    text-align : center;
    text-transform : uppercase;
    line-height : 1.25em;
    height : 1.25em;
    vertical-align : top;
    display : block;
    margin-top : 2em;
}

section.callto_contact a.call_action:hover {
    color : #46A4BE
}

section.callto_contact a.call_action span.icon-email {
    margin-right : 0.3em;
    display : inline-block;
    font-size : 1.5em;
    line-height : 1.25em;
}

section.callto_contact a.call_action span.text {
    font-size : 1em;
    line-height : 1.25em;
    display : inline-block;
}

/* slide logo */

.cms-slider {
    text-align : center;
}

.cms-slider li {
    width : 150px;
    display : inline-block;
    margin : 20px 0;
}

/* realisation page */

#realisations ul {
    margin: 0;
    padding: 0;
    list-style: none;
    background : #216B7F;
}

.real_item {
    float : left;
    width : calc(100% / 6);
    height : 0;
    margin: 0px;
    padding: 0;
    padding-top : calc(100% / 6);
    position : relative;
    overflow : hidden;
}

.real_item.height-x2 {
    padding-top : calc(100% / 3);
}

.real_item.width-x2 {
    width : calc(100% / 3);
}

#realisations li .overlay {
    display : block;
    position : absolute;
    top : 0;
    left : 0;
    width : 100%;
    height : 100%;
    padding : 2em;
    transition : background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    -webkit-transition : background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    -ms-transition : background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    background-color : rgba(241, 120, 75, 0);
    z-index : 10;
}

#realisations li .overlay .title {
    font-size : 1.2em;
    color : #ffffff;
    text-transform : uppercase;
    font-weight : 700;
    text-align : center;
    /*word-spacing: -0.15em;*/
}

#realisations li .overlay .description {
    color : #ffffff;
    font-weight : 400;
    font-size : 1.2em;
}

#realisations li img {
    display : block;
    width : 100%;
    min-width : 100%;
    z-index : 9;
}

/*
#realisations li:hover img {
	transform : scale(1.1);
}
*/

#realisations li:hover .overlay{
    opacity : 1;
    visibility : visible;
}


#realisations li .symbol-plus {
    position : absolute;
    bottom : 30%;
    left : 50%;
    margin-left : -10px;
    width : 20px;
    transition : all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transition : all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

#realisations li .symbol-plus .wire {
    height : 7px;
    left : 7px;
    transition : all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transition : all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

#realisations li:hover .symbol-plus {
    margin-left : -20px;
    width : 40px;
}

#realisations li:hover .symbol-plus .wire {
    height : 17px;
    left : 17px;
}

.direct_hover {
    width : 100%;
    height : 100%;
    position : absolute;
    top : 100%;
    left : 0%;
    z-index : 11;
}

.direct_hover .hover_container {
    width : 150px;
    height : 75px;
    left : 50%;
    margin-left : -75px;
    top : 25%;
    display : block;
    position : absolute;
}

/*---------------*/
/***** Bubba *****/
/*---------------*/

.effect-bubba {
    /* background: #9e5406; */
    background : #446D77
}

.effect-bubba img {
    opacity: 0.9;
    transform: scale(1.12);
    -webkit-transition: opacity 0.35s, transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

.effect-bubba:hover img {
    opacity: 0.4;
    transform: scale(1);
}

.effect-bubba .overlay::before,
.effect-bubba .overlay::after {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

.effect-bubba .overlay::before {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
}

.effect-bubba .overlay::after {
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1,0);
    transform: scale(1,0);
}

.effect-bubba .title {
    position : absolute;
    width : calc(100% - 5em);
    bottom : 60%;
    left : 2.5em;
    margin-top : -30px;
    /* Titres affichés
        -webkit-transition: -webkit-transform 0.35s;
        transition: transform 0.35s;
        -webkit-transform: translate3d(0,-20px,0);
        transform: translate3d(0,-20px,0);
        */
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
}

.effect-bubba .description {
    position : absolute;
    width : calc(100% - 5em);
    top : 40%;
    left : 2.5em;
    margin-top : 10px;
    text-align : center;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
}

.effect-bubba .event {
    position : absolute;
    width : calc(100% - 4em);
    bottom : 3em;
    margin-top : 0px;
    text-align : center;
    opacity: 0;
    z-index : 11;

    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
}

.effect-bubba .event .icon_container {
    width : 3em;
    height : 3em;
    line-height : 3em;
    display : inline-block;
    border-radius : 50%;
    border : 2px solid #ffffff;
    color : #ffffff;
    position : relative;
    z-index : 11;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
    -webkit-transform: all 0.35s;
    transform: all 0.35s;
}

.effect-bubba .event .icon_container:hover {
    background : rgba(255, 123, 0, 0.7);
    border-color : rgba(255, 123, 0, 0.7);
}

.effect-bubba:hover .overlay::before,
.effect-bubba:hover .overlay::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.effect-bubba:hover .title,
.effect-bubba:hover .description,
.effect-bubba:hover .event {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}


/* generic cms page */

#internet_presentation  .second_column svg, #internet_presentation  .second_column img {
    margin-top : 200px;
    width : 100%;
}

#grid_builder h2.invert {
    color : #ffffff;
    margin-bottom : 40px;
}

/* story section */

.story {
    -webkit-perspective : 1500px;
    perspective : 1500px;
    max-width : 100%;
    overflow : hidden;
}

.story_section {
    height : 300px;
    width : 100%;
    border-bottom : 1px solid #c8c8c8;
    background : #ffffff;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;

    -webkit-backface-visibility: hidden;
    backface-visibility : hidden;
}

#grid_builder .grid-in {
    position : relative;
}

.team_section {
    width : 100%;
    border-bottom : 1px solid #c8c8c8;
    background : #ffffff;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;

    -webkit-backface-visibility: hidden;
    backface-visibility : hidden;
}

#grid_builder .team_section  {
    height : auto;
    min-height : 450px;
    padding-bottom : 50px;
}

#grid_builder .team_section .col-xs-6  {
    padding:25px 10px;
    border-radius : 7px;

    transition : all 0.15s ease-in-out;
    -ms-transition : all 0.15s ease-in-out;
    -webkit-transition : all 0.15s ease-in-out;
}

.story_section.grey {
    background : #eceeee;
}

.story_section > .container, .team_section > .container {
    height : 100%;
}

#grid_builder .team_section .col-xs-6:hover  {
    background: rgba(67, 166, 191, 0.7);
}

.story_section .main_circle {
    width : 200px;
    height : 200px;
    border : 20px solid #eceeee;
    margin : 50px auto;
    backface-visibility : hidden;
    -webkit-backface-visibility : hidden;
}

#grid_builder .team_section .main_circle {
    position : relative;
    width : 130px;
    height : 130px;
    margin : 0;
    border : 5px solid #eceeee;
    -webkit-backface-visibility: hidden;
    backface-visibility : hidden;
    float : left;
}

#grid_builder .team_section .team_presentation {
    margin : 0 0 0 20px;
    height : 130px;
    line-height : 130px;
    text-align : left;
    float : left;
    max-width : calc( 100% - 150px );
}

#grid_builder .team_section .team_presentation h3 {
    color: #3f4244;
    font-family: "Roboto Slab",serif;
    font-weight: 700;
    margin : 0;

    transition : color 0.2s ease-in-out;
    -ms-transition : color 0.2s ease-in-out;
    -webkit-transition : color 0.2s ease-in-out;
}

#grid_builder .team_section .col-xs-4:hover .team_presentation h3,
#grid_builder .team_section .col-xs-4:hover .role,
#grid_builder .team_section .col-xs-4:hover .information  {
    color : #ffffff;
}

#grid_builder .team_section .team_presentation .role {
    color: #3f4244;
    font-family: "Roboto Slab",serif;
    font-weight: 400;
    display : inline;

    transition : color 0.2s ease-in-out;
    -ms-transition : color 0.2s ease-in-out;
    -webkit-transition : color 0.2s ease-in-out;
}

#grid_builder .team_section .team_presentation .information {
    font-size : 14px;
    font-weight: 300;

    transition : color 0.2s ease-in-out;
    -ms-transition : color 0.2s ease-in-out;
    -webkit-transition : color 0.2s ease-in-out;
}

#grid_builder .social-link {
    display : block;
    margin-top : 10px;
}

#grid_builder .social-link a {
    color : #3F4244;
}

#grid_builder .social-link a:hover {
    color : #46A4BE;
}

.story_section.grey .main_circle {
    border-color : #ffffff;
}

.story_section .mask_circle {
    width : 160px;
    height : 160px;
    position : absolute;
    top : 50%;
    left : 50%;
    margin-top : -80px;
    margin-left : -80px;
    overflow : hidden;

    -webkit-backface-visibility: hidden;
    backface-visibility : hidden;
}

.team_section .mask_circle {
    width : 120px;
    height : 120px;
    position : absolute;
    top : 50%;
    left : 50%;
    margin-top : -60px;
    margin-left : -60px;
    overflow : hidden;

    -webkit-backface-visibility: hidden;
    backface-visibility : hidden;
}

.story_section .mask_circle img, .team_section .mask_circle img {
    position :  absolute;
    top : 0;
    left : 0;
    width : 100%;
    border-radius : 50%;
}

.story_section .left_information {
    position : absolute;
    display : block;
    height : 160px;
    width : 30%;
    left : 5%;
    top : 50%;
    margin-top : -80px;
    text-align : right;
    font-family: "Roboto Slab",serif;
}

.story_section .right_information {
    position : absolute;
    display : block;
    height : 100px;
    width : 30%;
    right : 5%;
    top : 50%;
    margin-top : -50px;
    text-align : left;
    background : #a0a3a3;
    border-radius : 5px;
    font-family: "Roboto Slab",serif;
}

.story_section .vertical_bar {
    height: 160px;
    margin-top : -80px;
    position: absolute;
    top: 50%;
    width: 10px;
    background : #555959;
}

.story_section .vertical_bar:before {
    border-color: transparent #a0a3a3 transparent transparent;
    border-style: solid;
    border-width:12px 8px 12px 0;
    content: "";
    display: block;
    left: -8px;
    margin-top: -12px;
    position: absolute;
    top: 50%;
    width: 0;
}

.story_section .left_information .vertical_bar {
    right : -20px;
}

.story_section .left_information .vertical_bar:before {
    border-color: transparent transparent transparent #555959;
    border-width:12px 0 12px 8px;
    left : auto;
    right: -8px;
}

.story_section .right_information .vertical_bar {
    height: 100px;
    margin-top : -50px;
    background : #a0a3a3;
}

.story_section .date {
    color : #429AB3;
    font-size : 50px;
    font-weight : 700;

    margin : 0;
}

.story_section .story_information {
    font-size : 18px;
    color : #555959;
    margin : 1em 0;
}

.story_section .title {
    color : #555959;
    font-size : 24px;
    font-weight : 700;
    margin : 0;
}

.story_section .right_information .text_container {
    padding : 15px;
}

.type-formulaire {
    margin : 20px auto;
}

/* Page d'Etude de cas  */

.page_etude-de-cas #cms .content.type-image {
    margin: 5px 0;
}

.page_etude-de-cas .reference-info{
    width: 600px;
    position: absolute;
    top: 22px;
    left: 0px;
    text-align:center;
}

.page_etude-de-cas .reference-info h1{
    color: #fff;
    text-transform: uppercase;
    font-size:200%;
    margin: 0;
}


.page_etude-de-cas #contenu #breadcrumb_content {display:none;}

.references #realisations .bx-wrapper .bx-loading {
    display: none;
}

.reference {
    -webkit-perspective: 800px;
    perspective: 800px;
}

.wide_container {
    width : 100%;
    overflow-x:hidden;
}

.wide_container .half_wide {
    width : 50%;
    min-height : 200px;
    height : 100%;
    float : left;
    position : relative;
    z-index : 2;

    perspective : 800px;
    -webkit-perspective : 800px;
}

.franceloisirs-fr .half_wide.colored {
    background : #616e8a;
    z-index : 1;
    overflow : hidden;
}

.reference .customer_logo {
    position : absolute;
    top : 100px;
    left : 50%;
    margin-left : -80px;
    width : 160px;
    height : 160px;
    line-height : 160px;
    border-radius : 50%;
    background : #ffffff;
    border : 5px solid #616E8A;
    text-align : center;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-origin : 50% 50%;
    -webkit-transform-origin : 50% 50%;

    backface-visibility : none;
}

.reference .customer_logo img {
    display : block;
    max-width : 120px;
    margin : auto;
}

.reference .half_section {
    height : 390px;
    line-height : 390px;
    width : 600px;
    position : relative;
}

.reference .half_section.first {
    height : 300px;
    line-height : 300px;
}

.reference .half_section .full_slide_effect{
    height : 100%;
    width : 200%;
    position : absolute;
    top : 0;
    left : 0;
    perspective : 800px;
    -webkit-perspective : 800px;
}

.reference .half_wide.left .half_section {
    float : right;
}

.reference .half_wide.right .half_section {
    float : left;
}

.reference .project_title {
    line-height : 1.8em;
    position : relative;
}

.reference .project_title .title {
    display : block;
    float : left;
    text-transform : uppercase;
    font-weight : 700;
    font-size : 18px;
    width : 120px;
}

.reference .project_title .description {
    display : block;
    float : left;
    width : calc( 100% - 120px );
}

.reference .project_title li {
    list-style-type : square;
}

.ref-filtre{
    padding: 20px 0 0;
}

.ref-filtre ul li{
    display: inline-block;
}

.ref-filtre ul li:first-child{
    margin-left: 0;
}

.reference-header{
    height: 600px;
    background-size : cover;
    background-position : 0% 50%;
}

.reference-header .container{
    position: absolute;
    top: 200px;
    left: 50%;
    margin-left: -300px;
    width: 600px;
    color: #fff;
}

.reference-client{
    width: 242px;
    position: absolute;
    right: 0px;
    top: 90px;
}
/*
.reference-header .container .separateur-diag{
	position: absolute;
	width: 220px;
	height: 4px;
	left: 190px;
	top: 100px;
	background: #fff;
	-webkit-transform: rotate(-55deg);
	-moz-transform: rotate(-55deg);
	-ms-transform: rotate(-55deg);
	-o-transform: rotate(-55deg);
	transform: rotate(-55deg);
}
*/
.reference-lien{
    text-align: center;
}

.reference-lien a.button{
    display: inline-block;
    background: transparent;
    border-radius: 0;
    border: 3px solid #000;
    width: 180px;
    height: 50px;
    line-height: 45px;
    color: #000;
    font-weight: 300;
    text-transform: uppercase;
    font-family: 'Raleway', sans-serif;
    opacity: 0.9;
    transition: opacity .3s ease-in-out;
    box-shadow: inset 0 0 0 0 #53a7ea;
}

.references h2{
    text-align: center;
    padding: 20px 0;
    margin-bottom: 0;
    text-transform: uppercase;
    font-size: 20px;
}

.gallery_content{
    min-height: 180px;
    overflow: hidden;
    position : relative;
}

.build_gallery li {
    margin : 0;
}

.builder_gallery_content {
    min-height: 180px;
    overflow: hidden;
    position : relative;
}

.square_block {
    height : 0;
    padding-top : 100%;
    position : relative;
}

#gallery-reference{
    width: 10000px;
    height: 180px;
}

#gallery-reference li{
    display: inline-block;
    vertical-align: top;
    margin: 0;
    height : 180px;
    overflow: hidden;
}

#gallery-reference .effect-bubba .title{
    bottom: 45%;
}

#gallery-reference img{
    min-width: 100%;
    max-width : inherit;
    min-height : 100%;
}

.presentation_mask {
    position : absolute;
    overflow : hidden;
}

.presentation_mask img {
    display : block;
    height : 100%;
    max-width : inherit;
    width : auto;
}

.reference.franceloisirs-fr #ref_point2 .presentation_mask {
    width : 360px;
    height : 225px;

    top : 38px;
    left : 103px;
    background : red;
}

.reference.franceloisirs-fr .half_wide.right .ref_point3 img {
    display : block;
    margin-left : 50px;
}

.reference.franceloisirs-fr .half_wide .autoheight {
    position : relative;
}

.reference .bloc_text {
    position : absolute;
    left : 120px;
    top : 50%;
    height : 250px;
    margin-top : -125px;
    width : 60%;
    line-height : 1;
    padding-left : 20px;
    text-align : justify;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
}

.reference .left .bloc_text {
    padding-left : 0px;
    padding-right : 20px;
}

.reference .bloc_text .vertical_bar {
    position : absolute;
    height : 100%;
    width : 2px;
    top : 0;
}

.reference .right .bloc_text .vertical_bar {
    background : #ffffff;
    left : 0;
}

.reference .right .bloc_text .vertical_bar:before {
    content : '';
    display : block;
    width : 0;
    left : -6px;
    position : absolute;
    top : 50%;
    margin-top : -8px;
    border-color : transparent #ffffff transparent transparent;
    border-style : solid;
    border-width : 8px 6px 8px 0;
}

.reference .left .bloc_text .vertical_bar {
    background : #000000;
    right : 0;
}

.reference .left .bloc_text .vertical_bar:before {
    content : '';
    display : block;
    width : 0;
    right : -6px;
    position : absolute;
    top : 50%;
    margin-top : -8px;
    border-color : transparent transparent transparent #000000;
    border-style : solid;
    border-width : 8px 0 8px 6px;
}

.reference .half_wide .bloc_text h2 {
    color : #222222;
    font-size : 1.2em;
    font-family : 'Raleway', sans-serif;
    text-transform : uppercase;
    margin : 0;
}

.reference .half_wide .bloc_text h2, .reference .half_wide .bloc_text p, .reference .half_wide .bloc_text li {
    color : #222222;
}

.reference .half_wide.colored .bloc_text h2, .reference .half_wide.colored .bloc_text p, .reference .half_wide.colored .bloc_text li {
    color : #ffffff;
}

.reference .half_wide .bloc_text li {
    list-style-type : square;
}

/* page contact */

.contact .col-sm-4 .grid-in {
    padding : 20px;
    background : #E8E8E8;
    border-radius : 3px;
    min-height : 180px;
}

section.contact .container .col-sm-4 .header.classic_title h3 {
    margin : 0.3em 0;
    color: #3f4244;
    font-family: "Roboto Slab",serif;
    font-size: 1.2em;
    font-weight : 700;
}

section.contact .container .col-sm-4 p {
    font-size : 14px;
    line-height : 16px;
}

section.contact .container .col-sm-4 .highlight {
    font-weight : 700;
}

.row .grid-in {
    height : 100%;
}

.formstyle .row > div {
    margin-bottom : 10px;
}

.formstyle .grid-in {
    position : relative;
    min-height : 50px;
    line-height : 50px;
    vertical-align : top;
}

.formstyle .grid-in.textarea-grid {
    min-height :12em;
}

.page_autoreply .formstyle .grid-in.textarea-grid {
    min-height :14em;
}

.formstyle .grid-in .information {
    position : absolute;
    bottom : -6px;
    right : 0;
    font-size : 12px;
    line-height : 12px;
    margin : 0;
    font-style : italic;
}

.formstyle label {
    font-size : 14px;
    font-weight : 400;
}

.formstyle label.label {
    position : absolute;
    top : 0;
    left : 0;
    z-index : 2;
    height : 40px;
    line-height : 40px;
    width : 120px;
    padding : 0 20px;
    color : #333333;
}

.formstyle .grid-in select {
    display : inline-block;
    margin-left : 130px;
    min-height : 40px;
    line-height : 40px;
    vertical-align : top;
    margin-top : 0;
    width : calc(100% - 130px);
}

.formstyle .grid-in select option {
    padding : 0;
    border : 0;
    height : 36px;
    line-height : 36px;
}

.formstyle input, .formstyle textarea {
    position : absolute;
    top : 0;
    left : 0;
    z-index : 1;
    min-height : 40px;
    margin : 0;
    width : 100%;
    padding-left : 130px;

    -o-transition: all .1s ease-in;
    -webkit-transition: all .1s ease-in;
    -moz-transition: all .1s ease-in;
    transition: all .1s ease-in;
}

.formstyle input[type='radio'], .formstyle input[type='checkbox'] {
    position : static;
    display : inline-block;
    opacity : 0;
    visibility : hidden;
    width : auto;
    padding : 0;
    position : absolute;
}

.formstyle input[type='radio'] + label,
.formstyle input[type='checkbox'] + label {
    position : relative;
    padding-left : 30px;
    display : inline-block;
}

.formstyle input[type='radio'] + label:after {
    content : '';
    height : 22px;
    width : 22px;
    display : block;
    border : 1px solid #E8E8E8;
    background : #ffffff;
    border-radius : 50%;
    position : absolute;
    top : 0;
    left : 0;
}

.formstyle input[type='checkbox'] + label:after {
    content : '';
    height : 22px;
    width : 22px;
    display : block;
    border : 1px solid #E8E8E8;
    position : absolute;
    z-index : 1;
    top : 50%;
    margin-top : -11px;
    left : 0;
    background : #ffffff;
}

.formstyle input[type='radio']:checked + label:before {
    content : '';
    height : 16px;
    width : 16px;
    display : block;
    background : #3F4244;
    border-radius : 50%;
    position : absolute;
    top : 50%;
    margin-top : -8px;
    left : 3px;
}

.formstyle input[type='checkbox'] + label:before {
    content: "";
    color : black;
    font-size : 12px;
    height : 16px;
    width : 16px;
    line-height : 16px;
    text-align : center;
    display : block;
    position : absolute;
    z-index : 2;
    top : 50%;
    margin-top : -8px;
    left : 3px;

    font-family: 'kfont';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.formstyle input[type='checkbox']:checked + label:before {
    content: "\e903";
}

.formstyle input.focus, .formstyle textarea.focus {
    left : 170px;
    padding-left : 5px;
    width : calc( 100% - 170px );
}

.formstyle input[type='file'] {
    border : none;
    background : none;
}

.formstyle .submit {
    height : 40px;
    background : #43A6BF;
    border : 0;
    color : #ffffff;
    font-family : 'Raleway', sans-serif;
    text-transform : uppercase;
    font-weight : 700;
    width : auto;
    padding : 0 30px;
    margin : 10px auto;
    display : block;
    position : static;

    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

.formstyle .submit:hover {
    background : #F1784B;
}

.page_espaceclient .formstyle label.label,
.page_compte .formstyle label.label {
    width : 200px;
}

.page_espaceclient .formstyle input, .page_espaceclient .formstyle textarea,
.page_compte .formstyle input, .page_compte .formstyle textarea {
    padding-left : 200px;
}

.page_espaceclient .formstyle input.focus, .page_espaceclient  .formstyle textarea.focus,
.page_compte .formstyle input.focus, .page_compte  .formstyle textarea.focus {
    left : 200px;
    padding-left : 5px;
    width : calc( 100% - 200px );
}

.formstyle input.button {
    padding : 0;
}

.log_container {
    background : #E8E7E8;
    line-height : 40px;
}

.log_container  p {
    margin : 0;
    text-transform : uppercase;
    font-size : 12px;
}
.log_container  .mini {
    text-transform: none;
    font-size : 12px;
}

.aide .account_menu {
    margin : 20px 0;
}

.aide.outil .account_menu {
    margin : 0;
}

.aide .account_menu li {
    display : block;
    line-height : 30px;
    margin : 6px 0;
    padding : 0;
    position : relative;
}

/*.aide .account_menu li:after {*/
/*content : '';*/
/*display : block;*/
/*height : 0;*/
/*width : 0;*/
/*border-style : solid;*/
/*border-width : 5px 0 5px 6px;*/
/*border-color : transparent transparent transparent #000000;*/
/*position : absolute;*/
/*top : 50%;*/
/*margin-top : -5px;*/
/*right : 10px;*/
/*}*/

.aide .account_menu li a {
    color : #000000;
    padding : 0 10px;
    display : block;

    transition : all 0.15s ease-in-out;
}

.aide .account_menu li a:hover {
    color : #f1784b;
    padding : 0 10px 0 20px;
}

.aide .account_menu li.current a {
    background : #43A6BF;
    color : #ffffff;
}

.aide .account_menu li.current:after {
    border-color : transparent transparent transparent #ffffff;
}

#sitemap .title {
    color : #43A6BF;
    font-weight : 700;
}

#sitemap li a {
    color : #000000;
}

#sitemap li a:hover {
    color : #FF7B00;
}

/* 404 */

.notfound {
    font-size : 22px;
    font-weight : 700;
    margin : 2em 0;
    color : #43A5BE;
    font-weight : 300;
    font-size : 18px;
}

.notfound .highlight {
    font-size : 100px;
    font-family: "Roboto Slab",serif;
    font-weight : 700;
}

.notfound .svg_container {
    width : 108px;
    margin : 0 auto;
}

/* recrutement */

.offre-header {
    font-size : 18px;
    font-weight : 700;
    font-family : "Roboto Slab",serif;
    padding-bottom : 5px;
    margin-bottom : 5px;
    border-bottom : 2px solid #3F4244;
}


/****** FORMULAIRE ******/

form {
    margin:0;
}
select, textarea, input[type="text"], input[type="password"],
.normal, input.case, select, textarea {		/*** configuration general ***/
    color: #666;
    background-color: #fafafa;
    /*font-weight: bold;*/

    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
input.case,
input[type=checkbox]  {		/*** configuration case a coché ***/
    background-color: transparent;
}

select:focus, textarea:focus, input[type="text"]:focus, input[type="password"]:focus,
.focus, .focus2, .focus3,
select.focus,
textarea.focus, textarea.focus2  {	/*** Mise en avant des champs en cours d'utilisation - onfocus="this.className='focus';" ***/
    background: #fff;
    border: #F1784B 2px solid;
    color:#F1784B;
}

select, textarea, input[type="text"], input[type="password"], .normal {	/*** bordure des champs ***/
    border: #E8E8E8 2px solid;
}

textarea.normal, textarea.focus, textarea.focus2  /*** taille textarea ***/
{
    height:11.9em;
    overflow:auto; /* enleve la barre de défilement dans IE */
}

/* page partenaires */

.partner_list {
    text-align : center;
}

.partner_list li {
    list-style-type : none;
    display : inline-block;
}

/* page aide */

.aide-section{
    border-left: 3px solid #555555;
    padding-left: 1%;
    margin-bottom: 10px;
}
.aide h3{
    margin-bottom: 0.7em;
}
.aide ul{
    list-style-type: disc;
}
.aide .aide-section ul{
    list-style-type: none;
}
.aide ul li{
    margin-bottom: 0.5em;
}
.aide hr{
    position: relative;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    color: #43A6BF;
    margin: 1em 0;
}
.aide img{
    margin-bottom: 1em;
}


/* espace client */

.customer_block {
    background : #E8E7E8;
    border-radius : 3px;
    padding : 20px;
}

.alias {
    background : #43A5BE;
    border-radius : 3px;
    display : inline-block;
    padding : 5px;
    color : #ffffff;
    margin : 0 5px 0 0;
}

.alias.red {
    background : #BF350F;
}

ul.simple_list li {
    list-style-type : none;
    margin-left : 0;
    padding : 0;
}

/* Menu gauche outils */
ul.menu_outils{
    float:left;
    background: #242a2c;
    margin-right:25px;
    width:240px;
}
ul.menu_outils li{
    padding: 15px;
    margin:0;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
ul.menu_outils li a{
    color:#46a4be;
    display:block;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
ul.menu_outils li.active, ul.menu_outils li:hover{
    background:#46a4be;
}
ul.menu_outils li.active a, ul.menu_outils li:hover a{
    color:#ffffff;
}

/* MEDIA QUERY */

/*
4 break points dont les tailles sont les suivantes

    - Supérieur à 940px de large pour les écrans de bureau
    - Entre 768 et 939px de large pour les tablette en mode portrait
    - Moins de 767px de large pour les smartphones en mode paysage
    - Moins de 380px de large pour les smartphone en mode portrait
*/

/*
@-ms-viewport {
width: device-width;
}
*/

/* CARNET D'ADRESSES */

#carnet thead th{
    font-weight:bold;
    text-align: center;
    min-width:100px;
    padding:10px 0;
}
#carnet td{
    text-align: center;
    padding:5px 10px;
}
#carnet th, #carnet td{
    border: 1px solid black;
}

#carnet_add_contact .error{
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
    padding:15px;
    text-align: center;
    margin-bottom:10px;
}

.tags a {
    display: inline-block;
    /*vertical-align: top;*/
    padding: 0px 1px;
    margin: 0 0px 3px 2px;
    color: #999;
    font-weight: 500;
    font-size: 80%;
    text-align: left;
}



/* garder max-width: et pas max-width : car sinon repond.js ne fonctionne pas */
@media screen and (max-width: 599px) {
    html { overflow-x:hidden; width : 100%; }
    body { -ms-text-size-adjust: none; -webkit-text-size-adjust: none; overflow-x:hidden; width : 340px; }
    body:not(.isMobile) {width : 100%;}
    figure img { height:auto; margin:0; padding:0; max-width:100% !important; }
    #accroche1:before { content:"Version mobile du site de l'agence web"; }

    .sm-hidden {
        display : none;
    }

    /* Largeur élément général de la page */
    #bandeau, .footer, #contenu, #mh, #mb, #mots, .widthgen
    {
        max-width:none;
        min-width:320px;		/* inherit / 100% ie7 */
        width:100%;
    }

    body:not(.isMobile) #bandeau, body:not(.isMobile) .footer {
        width : 100%;
        max-width : none;
    }

    .container,
    #contenu.container {
        margin: 0 auto;
        position: relative;
        width: calc(100% - 20px);
        min-width : 300px;
    }
    /**** COLONNE ***/
    #colonne1, #colonne2
    {
        position:relative;
        float: none;
        width: auto;
        padding:10px 10px 10px 10px;
        background: burlywood;/**/
    }
    #conteneur, #colonne1, #colonne2
    {
        margin:20px 20px;
    }

    .main_column, .container .main_column {
        width : 100%;
    }

    .second_column {
        display : none;
    }
    /********** BANDEAU ***********/

    #topmenu_container {
        /* display : none; */
    }

    #bandeau
    {
        position:absolute;
        height:60px;
        margin:auto;
        /* top : 0; */
    }
    #bandeau:not(.sticky){
        height:62px;
    }

    #logo
    {
        position:absolute;
        top:10px;
        left:20px;
    }
    #logo img
    {
        width:110px;
    }

    .logo_text {
        display : none!important;
    }

    #kyxar_logo.logo {
        width : 57px;
        top : 6px;
    }

    #kyxar_logo.logo .logo_circle {
        width : 47px;
        margin-right : 10px;
    }

    #accroche1
    {
        position:absolute;
        top:45px;
        left:auto;
        right:10px;
        border:#e00 1px solid;/**/
    }
    #accroche1 a
    {
        width:auto;
        height:auto;
    }

    .pace {
        top: 0;
    }

    .pace.sticky {
        top : 0;
    }

    /*** Acces rapide Contenu haut page ***/

    #acces .masque { display : none; }

    #acces .fa + .text {
        display : none;
    }

    /********** MENU ***********/
    /********** MENU HAUT ***********/
    #mh {
        display : none;
    }

    #kyxar_logo {
        left : auto;
        right : 0;
    }

    #breadcrumb{
        line-height: 1.4em;
        min-height: 1.4em;
    }

    #breadcrumb a{
        padding: 4px;
    }

    .navigation-pipe{
        font-size: 14px;
    }

    #mm {
        display : block;
        top : 8px;
    }

    .slideshow .text {
        font-size : 1.5em;
        width : 280px;
        margin-left : -140px;
        top : 120px;
    }

    /********** MENU BAS ***********/
    #mb
    {
        height:auto; /* annule hauteur*/
        font-size:150%;
    }
    #mb ul
    {
        margin-left:0; /* annule marge */
        line-height:30px;
    }
    #mb a
    {
        padding:0;
        display:block;
        border-bottom:1px solid #bbb;
    }

    /*** mots footer ***/
    #mots, .sepfooter { display:none; }

    #rassurance_list li {
        float : none;
        margin : auto;
    }

    #slider,
    .slideshow {
        min-width : 300px;
        height:300px;
    }

    .real_item {
        float : left;
        width : calc(100% / 3);
        height : 0;
        margin: 0px;
        padding: 0;
        padding-top : calc(100% / 3);
        position : relative;
        overflow : hidden;
    }

    .real_item.height-x2 {
        padding-top : calc(100% * 2 / 3);
    }

    .real_item.width-x2 {
        width : calc(100% * 2 / 3);
    }

    .grid_50, .grid_25 {
        width : 100%;
    }

    .main_news {
        margin-bottom : 20px;
    }

    .story_section {
        height : 500px;
    }

    .story_section .left_information {
        left: 0%;
        width: 90%;
        top : 20%;
    }

    .story_section .right_information {
        right: 0%;
        width: 100%;
        top : inherit;
        bottom : 10%;
    }

    #grid_builder .team .team_section .main_circle {
        width : 90px;
        height : 90px;
        display : block;
        margin : 15px auto 0 auto;
        float : none;
    }

    .team .team_section .mask_circle {
        width : 80px;
        height : 80px;
        margin-left: -40px;
        margin-top: -40px;
    }

    #grid_builder .team .team_section .team_presentation {
        height : 90px;
        line-height : 90px;
        max-width: 100%
    }

    .footer {
        max-width : 340px;
    }

    /* home page */

    #activity_list {
        width : 240px;
        margin : 0 auto;
    }

    #call_project {
        display : none;
    }

    .real_item {
        width : calc(100% / 2);
        padding-top : calc(100% / 2);
    }

    .real_item.height-x2 {
        padding-top : 100%;
    }

    .real_item.width-x2 {
        width : 100%;
    }

    #realisations li .overlay .description {
        display : none;
    }

    .reference-header .container {
        width : 300px;
        margin-left : -150px;
    }

    .reference-header .reference-info,
    .reference-header .reference-client{
        position : static;
        top : 0;
        left : 0;
        width : 100%;
        text-align : center;

    }

    .reference-header .reference-client{
        line-height : 150px;
        vertical-align : middle;
    }

    .reference-header .container .separateur-diag {
        position : static;
        top : 0;
        left : 0;
        transform : rotate(0deg);
        width : 100%;
        height : 2px;
    }

    .reference-header .reference-client > * {
        display : inline-block;
        line-height : 1.2;
        vertical-align : middle;
    }

    #footer_compensation {
        display : none;
    }

    .footer {
        position : relative;
        bottom : inherit;
        left : inherit;
    }

    .row .grid-in {
        margin : 10px 0;
    }

    .cms-slider li {
        width : 110px;
        display : inline-block;
        margin : 20px 0;
    }

    #cookies_content {
        height : 70px;
    }

    #cookies_content .alert_txt {
        height : 70px;
        line-height : 70px;
    }


    #nav_espace_client .list_menu li{
        text-align: center;
    }
    #nav_espace_client .list_menu li .text{
        width: 180px;
    }
    #nav_espace_client .list_menu li:not(.active) a::after {
        left: 65px;
    }
    #account #tabs_menu_account .ui-widget-header {
        border-right: 0;
    }
    #account .aide #tabs_menu_account .account_menu li {
        margin: 0;
    }
    #account .aide .bordered::after {
        background-color: transparent;
        height: 20px;
    }

}

/* ipad 2 , only screen and (max-device-width:991px)*/
@media screen and (min-width: 600px) and (max-width: 1025px) {
    .container, #mh, #mb, #mots, .widthgen {
        width : 720px;
    }

    #mh {
        display : none;
    }

    #kyxar_logo {
        left : auto;
        right : 0;
    }

    #mm {
        display : block;
    }

    .slideshow .text {
        font-size : 2.5em;
        width : 550px;
        margin-left : -275px;
    }

    #rassurance_list li {
        width : 300px;
    }

    .footer .logo {
        width : 90%;
    }

    .footer #logo_text {
        height : 46px;
    }

    .footer .social_container .icon_footer {
        margin-right : 1em;
    }

    .story_section .left_information {
        left: 0%;
        width: 33%;
    }

    .story_section .right_information {
        right: 0%;
        width: 35%;
    }

    #grid_builder .team .team_section .main_circle {
        width : 90px;
        height : 90px;
        margin : 15px auto 0 auto;
        display : block;
        float : none;
    }

    .team .team_section .mask_circle {
        width : 80px;
        height : 80px;
        margin-left: -40px;
        margin-top: -40px;
    }

    #grid_builder .team_section .team_presentation {
        height : 80px;
        line-height : 80px;
        margin-left : 0px;
        max-width: 100%;
        float : none;
    }

    .real_item {
        width : calc(100% / 3);
        padding-top : calc(100% / 3);
    }

    .real_item.height-x2 {
        padding-top : calc(100% / 1.5);
    }

    .real_item.width-x2 {
        width : calc(100% / 1.5);
    }

    #realisations li .overlay .description {
        font-size : 1em;
    }
    #espace_client .aide .account_menu li a {
        /*padding: 0 5px;*/
        font-size: 13px;
    }

}

@media screen and (min-width: 600px) and (max-width: 760px) {
    .container, #mh, #mb, #mots, .widthgen {
        width : 600px;
    }

    .sm-hidden {
        display : none;
    }

    #activity_list {
        width : 480px;
        margin : 0 auto;
    }

    #footer_compensation {
        display : none;
    }

    .footer {
        position : relative;
        bottom : inherit;
        left : inherit;
    }

    #realisations li .overlay .description {
        display : none;
    }

    #nav_espace_client .list_menu li{
        text-align: center;
    }
    #nav_espace_client .list_menu li .text{
        width: 180px;
    }
    #nav_espace_client .list_menu li:not(.active) a::after {
        left: 65px;
    }

    #account #tabs_menu_account .ui-widget-header {
        border-right: 0;
    }
    #account .aide #tabs_menu_account .account_menu li {
        margin: 0;
    }
    #espace_client .aide .account_menu li a {
        font-size: 16px;
    }
    #account .aide .bordered::after {
        background-color: transparent;
        height: 20px;
    }

}

@media screen and (min-width: 1026px) and (max-width: 1250px) {
    .container, #mh, #mb, #mots, .widthgen {
        width : 960px;
    }

    #rassurance_list li {
        width : 240px;
    }

    .real_item {
        width : calc(100% / 4);
        padding-top : calc(100% / 4);
    }

    .real_item.height-x2 {
        padding-top : calc(100% / 2);
    }

    .real_item.width-x2 {
        width : calc(100% / 2);
    }

}

/************************* PRINT ******************************/
@media print {

    body:before {
        content:"";
        display:block;
        color:gray
    }
    body { background:none #fff !important; color:#000 !important; }
    #bandeau, .footer, #contenu { display:block !important; width:auto !important; border:0 !important; max-width:inherit; min-width:inherit; }
    #conteneur { margin:0; }

    /* Desactive les fond, shadow, text-shadow */
    *
    {
        background:none;
        background:none !important;
        filter: progid:DXImageTransform.Microsoft.gradient( enabled='false' );
        border:0 !important;

        -moz-box-shadow:none !important;
        -webkit-box-shadow:none !important;
        box-shadow:none !important;

        text-shadow:none !important;
    }

    /* affiche les bloc en hidden normalement pour version imprimable */
    #bloc { overflow:visible; }

    /*** MASQUE LES ELEMENTS DE NAVIGATION ***/
    #acces, #mh, #mb, #mots, .kyxar, #close, .navig, #colonne1,  #colonne2
    { display:none; }

    /* Largeur élément général de la page */

    /**** COLONNE ***/

    /*** bandeau imprimable ***/
    #bandeau { height:50px; }

    #logo {	position:absolute; top:0px; left:0px; }
    #logo img {	width:inherit; }
    #accroche { position:absolute; top:0px; left:300px; }

    /* Largeur élément général de la page */

}

/* animations */

@keyframes menuIn {
    0%   {
        min-height : 1.5em;
        max-height : 1.5em;
        margin : 2.375em 0;
        background : transparent;
    }
    20%   {
        min-height : 1.5em;
        max-height : 1.5em;
        margin : 2.375em 0;
        background : #43a6bf;
    }
    50%  {
        min-height : 100px;
        max-height : 500px;
        margin : 0;
        background : #43a6bf;
    }
    100% {
        min-height : 100px;
        max-height : 500px;
        margin : 0;
        background : #43a6bf;
    }
}

@-webkit-keyframes menuIn {
    0%   {
        min-height : 1.5em;
        max-height : 1.5em;
        margin : 2.375em 0;
        background : transparent;
    }
    20%   {
        min-height : 1.5em;
        max-height : 1.5em;
        margin : 2.375em 0;
        background : #43a6bf;
    }
    50%  {
        min-height : 100px;
        max-height : 500px;
        margin : 0;
        background : #43a6bf;
    }
    100% {
        min-height : 100px;
        max-height : 500px;
        margin : 0;
        background : #43a6bf;
    }
}

@keyframes menuOut {
    0%   {
        min-height : 100px;
        max-height : 500px;
        margin : 0;
        background : #43a6bf;
    }
    20%   {
        min-height : 100px;
        max-height : 500px;
        margin : 0;
        background : #43a6bf;
    }
    50%  {
        min-height : 1.5em;
        max-height : 1.5em;
        margin : 2.375em 0;
        background : #43a6bf;
    }
    100% {
        min-height : 1.5em;
        max-height : 1.5em;
        margin : 2.375em 0;
        background : transparent;
    }
}

@-webkit-keyframes menuOut {
    0%   {
        min-height : 100px;
        max-height : 500px;
        margin : 0;
        background : #43a6bf;
    }
    20%   {
        min-height : 100px;
        max-height : 500px;
        margin : 0;
        background : #43a6bf;
    }
    50%  {
        min-height : 1.5em;
        max-height : 1.5em;
        margin : 2.375em 0;
        background : #43a6bf;
    }
    100% {
        min-height : 1.5em;
        max-height : 1.5em;
        margin : 2.375em 0;
        background : transparent;
    }
}

@keyframes menuLinkIn {
    0%   {
        color:#ffffff;
        padding:0 15px 0 15px;
        margin : 0;
    }
    20%   {
        color:#ffffff;
        padding:0 25px 0 25px;
        margin : 0;
    }
    50%  {
        color:#ffffff;
        padding:0 25px 0 25px;
        margin: 2.375em 0 0.2em 0;
    }
    100% {
        color : #ffffff;
        padding : 0 150px 0 0;
        margin: 2.375em 0 0.2em 0;
    }
}

@-webkit-keyframes menuLinkIn {
    0%   {
        color:#ffffff;
        padding:0 15px 0 15px;
        margin : 0;
    }
    20%   {
        color:#ffffff;
        padding:0 15px 0 15px;
        margin : 0;
    }
    50%  {
        color:#ffffff;
        padding:0 15px 0 15px;
        margin: 2.375em 0 0.2em 0;
    }
    100% {
        color : #ffffff;
        padding : 0 150px 0 0;
        margin: 2.375em 0 0.2em 0;
    }
}

@keyframes menuLinkOut {
    0%   {
        color : #ffffff;
        padding : 0 150px 0 0;
        margin: 2.375em 0 0.2em 0;
    }
    20%   {
        color:#3f4244;
        padding:0 15px 0 15px;
        margin: 2.375em 0 0.2em 0;
    }
    50%  {
        color:#3f4244;
        padding:0 15px 0 15px;
        margin : 0;
    }
    100% {
        color:#3f4244;
        padding:0 15px 0 15px;
        margin : 0;
    }
}

@-webkit-keyframes menuLinkOut {
    0%   {
        color : #ffffff;
        padding : 0 150px 0 0;
        margin: 2.375em 0 0.2em 0;
    }
    20%   {
        color:#ffffff;
        padding:0 15px 0 15px;
        margin: 2.375em 0 0.2em 0;
    }
    50%  {
        color:#ffffff;
        padding:0 15px 0 15px;
        margin : 0;
    }
    100% {
        color:#3f4244;
        padding:0 15px 0 15px;
        margin : 0;
    }
}

@keyframes submenuIn {
    0%   {
        transform: translateX(20px);
        visibility : hidden;
        opacity : 0;
        display : none;
    }
    70%  {
        transform: translateX(20px);
        visibility : hidden;
        opacity : 0;
        display : block;
        width : 0;
    }
    100% {
        transform: translateX(0px);
        visibility : visible;
        opacity : 1;
        display : block;
        width : 100%;
    }
}

@-webkit-keyframes submenuIn {
    0%   {
        transform: translateX(20px);
        visibility : hidden;
        opacity : 0;
        display : none;
    }
    70%  {
        transform: translateX(20px);
        visibility : hidden;
        opacity : 0;
        display : block;
    }
    100% {
        transform: translateX(0px);
        visibility : visible;
        opacity : 1;
        display : block;
        width : 100%;
    }
}


.invalid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 20' fill='none' stroke='%23d20404' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-x'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat no-repeat;
    line-height:24px;
    padding-left:22px;
    color:#ec3f41;
}
.valid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 20' fill='none' stroke='%2301ad07' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-check'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat no-repeat;
    line-height:24px;
    padding-left:22px;
    color:#3a7d34;
}

.ajax-loader {
    width: 100%;
}

/* Module ressource */
.ressources-h2{
    margin-bottom: 20px!important;
}

.ressources-table {
    width: 80%;
}

.ressources-table th, .ressources-table td {
    border: 1px solid black;
    padding: 10px;
}
.ressources-table th {
    text-align: center;
}

.titre_statut_materiel{
    text-decoration: underline;
}

.affichage_type_ressource
{
    background-color: #f5f5f5;
    margin-bottom: 5px;
    padding: 6px;
}

.affichage_type_ressource h3
{
    display: inline-block;
    padding-left: 5px;
}

.affichage_type_ressource h3, .affichage_type_ressource img{
    display: inline-block;
    padding-left: 5px;
    margin: 0px;
}

.affichage_type_ressource h3
{
    text-decoration: underline;
}

.affichage_type_ressource:hover
{
    cursor: pointer;
}

.image_container {
    display: inline-block;
    padding: 10px;
    vertical-align: middle;
    align-items: center;
}

.image_container img {
    width: 2.4rem;
    height: 2.4rem;
    margin-top: 1.3rem;
}


/* Erreurs des formulaires de tous les modules */

.form_error {
    color: #FF0000FF;
}

/* Module Carnet d'adresses */

#carnet_h2 {
    margin: 0 0 1em 0;
}

.carnet_input {
    margin: 0 0 0 10px;
}

#carnet_table td{
    padding-bottom: 10px;
}

#carnet_textarea{
    height: 100px;
    min-height: 100px;
    max-width: 490px;
    min-width: 490px;
}

.carnet-adresse-import{
    margin-top:2.4rem;
}
#carnet_text {
    width: 500px;
    border-style: dashed;
    border-width: 1px;
    padding: 5px
}

.carnet_a {
    color: #F1784B;
    cursor: pointer
}

#carnet {
    border-color: #444;
}

#carnet th {
    color: #43A6BF; text-align:center;
}

#carnet .ctr {
    text-align:center;
}

#carnet .lnk {
    text-align:center; width: 15%
}

#carnet .lnk img{
    vertical-align:-0.5em;
}

#carnet_filtre {
    border: 1px solid #444;
    background:#eee;
    padding:0 0 5px 10px;
    margin:10px 0;
}

/* Module MonCompte */

#moncompte_hr{
    border: 1px solid #43A6BF;
}

.moncompte_div {
    margin: 5px 5px 15px 0;
}

.moncomptediv a:hover{
    color: #5380b1
}

#moncompte_h3:hover {
    color: #43A6BF;
}

#moncompte_section-modif{
    display: flex;
}


#moncompte_h2{
    margin-bottom: 20px;
}

#moncompte_form-group-submit{
    margin: 10px 130px 0 130px;
}

#moncompte_form{
    width: 400px;
}

#moncompte_enregistrer{
    width: 100%;
}

#moncompte_pass_infobulle h4{
    margin-top:0;
}

#moncompte_pass_infobulle{
    margin-left: 50px;
    padding-top: 15px;
}

#moncompte_pass_infobulle li{
    color: #FF0000FF;
    list-style-image:url(../img/icon/cross.png);
}

.moncompte_form-group input[type="password"] {
    width: 25em;
    padding: 8px;
    box-sizing: border-box;
}

.moncompte_form-group label{
    margin-bottom: 10px;
}



/* Module ConfigMessagerie */


.sepConfig  {
    font-weight:bold;
    margin-bottom: 2rem;
}

.corps hr{
    border: 0.5px dotted #F1784B;

}
.det{
    display:flex;
    font-size: 1.4rem;

}
.det p{
    font-weight: 600;
    margin-right: 0.8rem;
}
.det2{
    font-size: 1.4rem;

}





.aide img {
    margin-bottom: 1em;
    min-width: 20px;
    height: 300px;
}

/* Couleur Toast */

.alert-success {
    display: flex;
    align-items: center;
    color: #274199;
    background-color: #EDF5FE;
    border: 1px solid #274199;
    font-size: 1.4rem;
    font-weight: 600;
    margin-left: 3.5rem;
    height: 4.8rem;
    width: 89.5rem;
    margin-bottom: 3rem;
}

.alert-success .link {
    color: #274199;
}
.alert-success .alert-heading {
    color: #274199 !important;
}
.alert-success .close {
    background-position: -38px -10px !important;
}

.alert-warning{
    display: flex;
    align-items: center;
    background-color: #fbf4d9;
    color: #ffcc00;
    border: 1px solid #ffcc00;
    font-size: 1.4rem;
    font-weight: 600;
    margin-left: 3.5rem;
    height: 4.8rem;
    width: 89.5rem;
    margin-bottom: 3rem;
}
.alert-danger,
.alert-error {
    display: flex;
    align-items: center;
    color: #8E2923 !important;
    background: #FBF2F2!important;
    border: 1px solid #E2AAA7!important;
    font-size: 1.4rem;
    font-weight: 600;
    margin-left: 3.5rem;
    height: 4.8rem;
    width: 89.5rem;
    margin-bottom: 3rem;
}

.toast-accueil{
    margin-left: 0;
    margin-top: 1.85rem;
    margin-bottom: 0;
}
.alert-danger p,
.alert-error p,
.alert-success p,
.alert-warning p{
    margin-bottom: 1rem;
    margin-left: 0.8rem;
}
.alert-danger img,
.alert-error img,
.alert-success img,
.alert-warning img{
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: 0!important;
}
.alert-danger .link,
.alert-error .link {
    color: #8E2923;
}
.alert-danger .alert-heading,
.alert-error .alert-heading {
    color: #8E2923 !important;
}
.alert-error .close,
.alert .alert-danger .close {
    background-position: -95px -10px !important;
}

/* Auth */
.auth_footer{
    position: relative;
}
.auth_hr{
    position: relative;
    top: 0;
    left: 0;
    width: 41.4rem;
    height: 0.1rem;
    color: #E0E1E4;
    margin-bottom: 2.4rem;
}
#intro {
    background-color: #F7F8FA;
}



.auth_body{
    display:flex;
    justify-content: center;
    align-items: center;
}
.auth_mainimg img{
    max-width: 83.4rem;
    max-height: 66.2rem;
    flex-shrink: 0;
    margin-left:-17rem;
    margin-bottom: 15.2rem;
    margin-top: 10.6rem;

}

.auth_section{
    position:relative;
    border-radius: 0.8rem;
    border: 1px solid #E2E3E6;
    background: #FFF;
    width: 46.2rem;
    z-index: 1;
    margin-right: 2rem;
}
.auth_section_titre h3{
    color: #3B3D40;
    font-size: 2rem;
    font-weight: 700;
}
.auth_section_titre img{
    width: 2.4rem;
    height: 2.4rem;
    margin-right: 0.8rem;
    margin-top: 0.4rem;
}
.auth_section_titre{
    display: flex;
    margin-top: 2.4rem;
    margin-bottom: 2.4rem;
    margin-left: 2.4rem;

}

.auth_input{
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 2.4rem;
    margin-bottom: 2.4rem;
}
.auth_input label{
    color: #101010;
    font-size: 1.2rem;
    font-weight: 600;
}
.auth_input input{
    border-radius: 0.8rem;
    border: 1px solid #DFE4EA;
    background:  #FFF;
    height: 4rem;
    padding: 0 1.6rem;
    width: 41.4rem;
}

.auth_remember a{
    color: #3B3D40;
    font-size: 1.2rem;
    font-weight: 500;
    text-decoration-line: underline;
    margin-right: 2.4rem;
    display: flex;
    align-items: center;
}
.auth_remember a img{
    width: 1.6rem;
    height: 1.6rem;
    margin-left:0.8rem;
}
.auth_remember a:hover{
    color:#F1784B!important;

}
.auth_remember label{
    color: #3B3D40;
    font-size: 1.2rem;
    font-weight: 500;
    margin-left: 0.4rem;
}
.auth_remember input{
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.4rem;
    border: 1px solid #DFE4EA;
}

.auth_remember{
    display:flex;
    margin-left: 2.4rem;
    justify-content: space-between;
}
.auth_check{
    display: flex;
    align-items: center;
}
.auth_check *{
    cursor: pointer;
}

.auth_button{
    border-radius: 0.4rem;
    background: #43A5BE;
    width:41.4rem;
    height: 4rem;
    display:flex;
    margin-top: 2.4rem;
    cursor: pointer;
    border:none;
    margin-left:2.4rem;
    align-items: center;
    justify-content: center;
}

.auth_button p{
    color: #FFF;
    font-size: 1.4rem;
    font-weight: 500;
    margin-left: 0.8rem;
}
.auth_button img{
    width: 2.4rem;
    height: 2.4rem;
}
.auth_button:hover{
    background: #45abc5;
}
.auth_info{
    color: #3B3D40;
    font-size: 1.2rem;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 2.4rem;
    margin-top: 2.4rem;
    margin-bottom: 2.4rem;
}
.auth_info p{
    margin-bottom: 0;
}

.auth_num{
    color: #42A7C1;
    font-weight: 700;
}
.auth_mail{
    color: #42A7C1;
    font-weight: 700;
    text-decoration-line: underline;
}



/* !Auth */

/* Auth password */
.auth_button_mdp p{
    margin-top: 1rem;
    margin-left: 0;
}

button {
    background: none;
    border: none;
    padding: 0;
}





.auth_cancel  {
    border-radius: 0.4rem;
    background-color:#F1784B;
    width:41.4rem;
    height: 4rem;
    display:flex;
    margin-top: 2.4rem;
    cursor: pointer;
    border:none;
    margin-left:2.4rem;
    align-items: center;
    justify-content: center;
}

.auth_cancel:hover{
    background-color: #f37f53;
}
.auth_cancel a{
    color: #FFF;
    font-size: 1.4rem;
    font-weight: 500;
    width: 100%;
    height: 100%;
    margin-top: 2rem;
}
.auth_cancel a:hover {
    color: #FFF!important;
}

.auth_mail:hover{
    color:#F1784B!important;
}

.auth_cancel_new, .auth_p{
    margin-bottom:2.4rem;
}

.auth_p{
    font-size: 1.2rem;
}

.auth_error_p{
    color: red;
    margin-right: 2rem;
}
.auth_newmdp{
    margin-bottom: 0;
}

.auth_alert.with_alert{
    margin-bottom: 8rem;
}
/* !Auth password */

/* Menu */

.accueil-body{
    display: flex;
    margin-bottom: 30.2rem;
}
.accueil-body-right{
    display: flex;
    flex-direction: column;
    margin-left: 3.5rem;
}
.accueil_titre{
    display:flex;
}
.accueil_titre img{
    width: 2.8rem;
    height: 2.8rem;
    margin-right: 1rem;
    margin-bottom: 0;
    margin-top: 4rem;
}

.accueil_titre h2{
    margin-top: 4.4rem;

    color: #3B3D40;
    font-size: 2rem;
    font-weight: 700;
}
.menu_section{
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top:4rem;
}

.menu_section p{
    color: #8D8D94;
    font-size: 1.6rem;
    font-weight: 500;
}

.menu_module{
    max-width: 103rem;
    display: grid;
    gap: 1.6rem;
    grid-template-columns: repeat(3, 1fr);
}

.menu-article{
    border-radius: 0.8rem;
    border: 1px solid #E2E3E6;
    background: #FFF;
    display: flex;
    flex-direction: column;
    width: 33rem;
    align-items: flex-start;
    padding-left: 1.6rem;
    padding-right: 1.6rem;

}

.menu_article_titre{
    display: flex;
    margin-top: 1.6rem;
}
.menu_article_titre h3{
    color: #3B3D40;
    font-size: 1.8rem;
    font-weight: 700;
}
.menu_article_titre img{
    margin-right: 0.8rem;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: 0;
}

.menu-article hr{
    position: relative;
    top: 0;
    left: 0;
    width: 30rem;
    height: 0.1rem;
    color: #E0E1E4;
    margin-bottom: 0.95rem;
    margin-top: 0.2rem;
}

.menu-article a{
    display: flex;
    align-items: center!important;
    color: #3B3D40;
    font-size: 1.6rem;
    font-weight: 600;
    text-decoration-line: underline;
    margin-bottom: 1.6rem;

}

.menu-article a img{
    width: 2rem;
    height: 2rem;
    margin-left:0.8rem;
    margin-bottom: 0;
}

.menu-article a:hover{
    color:#F1784B!important;
}

.content{
    padding-bottom: 30.2rem;
    background-color: #F7F8FA;
}
/* !Menu */

/* Sidebar */

.sidebar-section{
    display:flex;
    flex-direction: column;
    width: 30rem;
    column-gap: 1.6rem;
    margin-top: 4rem;
}

.sidebar-button-mail{
    width: 100%;
    border-radius: 0.4rem;
    background: #43A5BE;
    display:flex;
    align-items: center;
    height: 4rem;
}
.sidebar-button-mail:hover{
    background: #44aac5;
}
.sidebar-button-mail a{
    display:flex;
    color: #FFF;
    font-size: 1.4rem;
    align-items: center;
    font-weight: 500;
    height: 100%;
    width: 100%;
}
.sidebar-button-mail a:hover{
    color: #FFF!important;
}
.sidebar-button-mail a img:first-child{
    width: 2.4rem;
    height: 2.4rem;
    margin-right:0.8rem;
    margin-bottom: 0;
    margin-left: 0.8rem;
}
.sidebar-button-mail a img:last-child{
    width: 1.6rem;
    height: 1.6rem;
    margin-left: 10rem;
    margin-bottom: 0;
}

.sidebar-section hr{
    position: relative;
    top: 0;
    left: 0;
    width: 30rem;
    height: 0.1rem;
    color: #E0E1E4;

}
.sidebar-section h3{
    color: #8D8D94;
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
}
.sidebar-button{
    display:flex;
    align-items: center;
    width: 100%;
    border-radius: 0.4rem;
    height: 4rem;
    margin-bottom: 0.4rem;
}

.sidebar-button a{
    display:flex;
    align-items: center;
    color: #3B3D40;
    font-size: 1.4rem;
    font-weight: 600;
    width: 100%;
    height: 100%;

}
.sidebar-button img{
    margin-right: 0.8rem;
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom:0;
    margin-left: 0.8rem;
}

.sidebar-button:hover{
    background-color: #E4E7EF;
}

/* !Sidebar */

/* Content */

.content-body{
    background-color: #FFF;
    border-radius: 0.8rem;
    border: 1px solid #E2E3E6;
    margin-left: 3.5rem;
    padding: 2.4rem;
    width: 100%;
}

.content-body td, .content-body label{
    color: #3B3D40;
    font-size: 1.6rem;
    font-weight: 600;
}
.content-body img{
    width: 2.4rem;
    height: 2.4rem;
}
.content-body hr{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.1rem;
    color: #E0E1E4;
}

.content-titre{
    display: flex;
    align-items: center;
}

.content-titre h2{
    color: #3B3D40;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem!important;
}

.content-titre img{
    width: 2.6rem;
    height: 2.6rem;
    margin-right: 0.8rem;
    margin-bottom: 0;
}

.content-body h3{
    color: #3B3D40;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 2.4rem;
}
.content-body button{
    display:flex;
    align-items: center;
    border-radius: 0.4rem;
    height: 4rem;
    width: 30rem;
    margin-bottom: 1rem;
    background-color: #f37f53;
    cursor: pointer;
}

.content-body button:hover{
    background-color: #fa875b;
}
.content-body button a, .content-body button p{
    display:flex;
    align-items: center;
    width: 100%;
    font-size: 1.4rem;
    font-weight: 500;
    color:#FFF;
    margin-bottom: 0;
}

.content-body button a img, .content-body button p img{
    width: 2.4rem;
    height: 2.4rem;
    margin-left: 0.8rem;
    margin-right:0.8rem;
    margin-bottom: 0;
}

.content-button-valid{
    background: #43A5BE!important;
}
.content-button-valid:hover{
    background: #44aac5!important;
}

.content-body button a:hover{
    color:#FFF!important;
}

/* !Content */


/* Module reponse automatique */

.reponse_auto-etat{
    margin-left: 2.4rem;
    margin-bottom:2.4rem;
}

.reponse_auto-conseil{
    color:#777;
    font-size:8pt;
}

.rep-auto-button{
    margin-top: 2.4rem;
}
.reponse_auto-table .reponse_auto-td {
    padding-top:15px;
    padding-bottom:5px;
}
.reponse_auto-table .reponse_auto-space {
    width:25px;
}
#reponse_auto-enregister{
    margin-top: 20px;
}
#reponse_auto-textfield{
    width: 100%;
    max-width: 100%;
    height: 20rem;
    max-height: 100rem;
}

/* !Module reponse automatique */

/* Module CreationMail */

#creationmail_textarea {
    width: 100%;
    max-width: 100%;
    height: 20rem;
    max-height: 100rem;
}

.creationmail-table tr{
    display: flex;
    flex-direction: column;
    margin-bottom: 2.4rem;
}
/* !Module CreationMail */


/* gestion SMS */

.gestion_SMS-a{
    padding-bottom: 2rem!important;
}

/* !gestion SMS */

/* logs SMS */

.logs_SMS-content {
    white-space: pre-wrap;
}
.logsSMS-h2{
    padding-bottom: 20px!important;
}
/*  !logs SMS */



/* Module CompteFTP */


.compteFTP-table tr{
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}
#compteftp_ul li.pri {
    margin-bottom:15px;
}

#compteftp_a.add_pri {
    margin-left:22px;
}

#compteftp_pass_infobulle li{
    color: #FF0000FF !important;
    list-style-image:url(../img/icon/cross.png) !important;
}

.compteftp_TF{
    margin-left: 20px;
}

#compteftp_section-modif{
    display: flex;
}

#compteftp_pass_infobulle h4{
    margin-top:0;
}

#compteftp_pass_infobulle{
    margin-left: 50px;
}
/* !Module CompteFTP */

/* Module Supervision */

.content-body-supervision{
    width: 110%;
}
/* !Module Supervision */

/* Module Statistique */

.content-body-stats img{
    width: 80%;
    height: 40%;
}
.stats_table td font{
    padding-left: 10px;
}

.stats_table td{
    font-size: 13px;
}

.stats_table td, .stats_table th{
    padding:0;
    border: 1px solid rgb(128, 128, 128);
    color: black;
}

.stats_table {
    display: table;
    border-collapse: separate;
    border: 1px solid rgb(128, 128, 128);
    line-height: normal;
    font-weight: normal;
    font-size: medium;
    font-style: normal;
    text-align: start;
    border-spacing: 2px;
}


/* !Module Statistique */


/* Module Facture */

.facture-form{
    display:flex;
    align-items: flex-start;
}
.editer-button{
    margin-bottom: 0!important;
    width: 2.5rem!important;
    height: 2.6rem!important;
    margin-left: 0.8rem;
}

.editer-button img{
    margin-bottom: 0;
    margin-left: 0.3rem;
    width: 1.5rem;
    height: 1.5rem;
}

/* !Module facture */

/* Module doc*/

.doc-td a{
display: flex;
justify-content: center;
}
.doc-td a img{
    margin-bottom: 0;
}

/* Module Documents */

.documents_rubrique_documents{
    text-decoration: underline;
    margin-top: 2rem;
}

.documents_tableDoc {
    width: 50%;
}
.documents_tableDoc th, .documents_tableDoc td {
    border: 1px solid black;
    padding: 10px;
}
.documents_tableDoc th {
    text-align: center;
}

/* Module GestionSMS */

#gestionsms_span {
    line-break: anywhere
}

.table{
    overflow-x: scroll!important;
}

/* !Module doc*/
hr{
    border: 1px solid #E0E1E4;
}

#debug, .debug-hr{
    margin-left: 4rem;
    margin-top: 10rem;
    width:100%;
}

#menuContainer{
    z-index: 1;
    margin-top: 0!important;
}

.alert-auth{
    width: 100%;
    margin-left: 0!important;
    margin-bottom: 0!important;
}
.alert-auth img{
    margin-right: 0.8rem!important;
}

.auth_input:first-child.with_alert{
    margin-top: 10rem!important;
}

.content-body {
    overflow: scroll;
}

/* Style pour le bouton de menu burger */
.burger-menu div img {
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: 0 !important;
    margin-left: 0.8rem;
}

.burger-menu {
    display: none;
    z-index: 1000;
    position: absolute;
    top: -23.1rem;
    right: 1rem;
    cursor: pointer;
    align-items: center;
    background: #43A5BE !important;
    border-radius: 0.4rem;
    height: 4rem;
    width: 10rem;
    margin-top: 15rem;
}
.burger-menu:hover{
    background: #44aac5!important;
}
.burger-menu div{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.burger-menu div p {
    font-size: 1.4rem;
    font-weight: 500;
    color: #FFF;
    margin-bottom: 0!important;
}

/* Sidebar styles */
.account_menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
}

.account_menu li {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.sidebar-open {
    transform: translateX(0);
}

.sidebar-close {
    transform: translateX(100%);
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.accueil{
    background-color: #F7F8FA;
}


.filtre-voip-date{
    display: flex;
    gap: 0.8rem;
}

.filtre-voip-type{
    margin-top: 1rem;
}

.filtre-voip{
    border: 1px solid #E2E3E6;
    border-radius: 3px;
    padding: 2rem;
}
.filtre-voip-type{
    margin-top: 2rem;
    display: flex;
}

.filtre-voip-select{
    margin-left: 1rem;
    margin-right: 1rem;
}

#graph_entrant,#graph_sortant{
    width: 85rem;
    height: 50rem;
}


@media (max-width: 1250px) {
    .filtre-voip-date{
        display: flex!important;
        flex-direction: column!important;
    }
    #graph_entrant,#graph_sortant{
       width: 65rem;
    }

}

@media (max-width: 1025px) {
    #graph_entrant,#graph_sortant{
        width: 45rem;
        height: 30rem;
    }
}

/* Style pour les pubs */

#content-titre-pub {
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center;     /* Centre verticalement si nécessaire */
}

.pub-message {
    margin-bottom: 2em;
}

.pub-ending-message {
    margin: 25px 0 0 0;
    display: flex;
    justify-content: center;
}

.pub-arguments-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.pub-argument {
    display: flex;
    align-items: center;
    width: calc(50% - 10px); /* Chaque argument prendra environ 50% de la largeur, avec un espace entre */
    transition: transform 0.3s ease; /* Transition pour un effet d'animation */
    box-shadow: 0px 4px 6px rgba(67, 165, 190, 0.5); /* Ombre légère */
    gap: 15px; /* Espace entre l'image et le texte */
    padding: .8rem;
}

.pub-argument:hover {
    transform: scale(1.05);
}

.pub-argument img {
    width: 30rem;
    height: auto;
}

.pub-argument-texte {
    display: flex;
    flex-direction: column;
    font-size: 1.4rem;
}

.pub-argument-texte h3{
    margin: 0;
}

.sepa_section {
    margin: 0 auto !important;
}

@media (max-width: 580px) {
    .sepa_section {
        width: 100% !important;
        margin-left: 0;
    }
}


.content-titre.sepa {
    justify-content: center;
    margin-bottom: 2rem;
}

.content-titre.sepa {
    h2 {
        text-align: center;
    }
}

.content-sepa {
    padding: 5rem;
}

@media (max-width: 580px) {
    .content-sepa {
        padding: 1.5rem;
    }
}

.sepa_form {
    padding:2.5rem;
}

.sepa_form .auth_input,
.sepa_form .auth_button {
    width: 100%;
}

.sepa_form .auth_input,
.sepa_form .auth_button {
    margin-left: 0;
}

.sepa_section .infos-box {
    padding: 1rem;
    background-color: #f2f2f2;
    border-radius: 1rem;
    margin-bottom: 2rem;
}

.sepa_section .infos-box .auth_input:last-child {
    margin-bottom: 0;
}

.sepa_form .auth_input input[type=text]:disabled {
    background-color: #f9f9f9;
}