﻿@charset "UTF-8";
@-ms-viewport { width: device-width; }
@viewport { width: device-width; }

[hidden] { display: none; }

html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100%; }
html, body { margin: 0; padding: 0; }
body { /*overflow-x:hidden;*/ height: 100%; }
a:active, a:hover { outline: 0; }

ul.language-switcher-locale-url { margin:0;}
#footer #coord a.sitemap { display: inline-block; float: none; }

/* nav mobile off-canvas (https://github.com/dbushell/Responsive-Off-Canvas-Menu) */
.close-btn {
  display: block;
  width: 27px;
  height: 27px;
  padding: 0;
  border: 0;
  outline: none;
  background: url(../images/mobile_toggle_close_3x.png) no-repeat;
  background-size: 27px 27px;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
.close-btn:focus, .close-btn:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}

.nav-btn {
  display: block;
  width: 27px;
  height: 27px;
  padding: 0;
  border: 0;
  outline: none;
  background: url(../images/mobile_toggle_3x.png) no-repeat;
  background-size: 27px 27px;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
.nav-btn:hover, .nav-btn:focus {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}
.btn-nav-mobile {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index:9000;
}



@media screen and (min-width: 1025px) { 
  h4.headerslogan { left: 515px !important; top: 30px !important; }
    .btn-nav-mobile, .nav-mobile { display:none; }
  .nav-btn {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    z-index:9000;
  }
  #nav .close-btn {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    z-index:9000;
  }
  #nav ul {
    text-align: center;
    white-space: nowrap;
  }
  #nav li {
    display: inline-block;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }
  #nav li:last-child {
    border-right: none;
  }
  #nav li a {
    padding: 0.42857em 0.85714em;
  }
}



@media screen and (min-width: 1px) and (max-width: 1024px) { 
  #block-locale-language a { width: auto; }
  #block-menu-menu-menu-du-haut, #block-system-main-menu { display:none; }

  body { background: #fff none; }
  body.i18n-fr #header, body.i18n-en #header, body #header { height: 100px; background: url(../images/bg_header_mobile.png) 20px 15px no-repeat; background-size:162px 71px; z-index:7000; }
  h4.headerslogan { position: absolute !important; left: 200px !important; top: 10px !important; font-size: 15px !important; line-height: 16px !important; }

  div.linkhome { width: 160px; height: 70px; top: 15px; left: 20px; }
  div.linkhome a { width: 160px; height: 70px; }

  #page, #main, #block-views-bandeau-block .view-bandeau, #block-views-bandeau-block .view-content, #block-views-bandeau-block .views-row, .front .views-field-field-bandeau-resume { width: 100% !important; }
  
  #content, #content #content-inner { width: 100% !important; height:inherit !important; margin:0 !important; float:none !important; clear:none !important; padding:0 !important; }
  #content #content-inner { width: auto !important; padding:0 20px !important; clear:both !important; }
  #content #content-inner table { width: auto !important; max-width:100% !important; display:block; }
  #content #content-inner table img { width: auto !important; max-width:100% !important; }

  #block-views-bandeau-block, .not-front #main #content-top { position:relative !important; overflow:hidden !important; max-width:990px !important; margin:0 auto !important; text-align:center; }
  .not-front #main #content-top img { max-width:100% !important; height:auto !important; }
  #block-views-bandeau-block, #block-views-bandeau-block .view-content, .front .views-row { height:434px !important;  }
  .front .views-row img { width: auto !important; height:auto !important;  }
  #block-views-bandeau-block .view-bandeau { position: relative !important; }
  .front .views-field-field-bandeau-resume { bottom:15px !important; width: inherit !important; height:100px !important; }
  #block-views-bandeau-block .view-bandeau #beandeau-cycle-pager { position:absolute; width: auto !important; height:33px !important; top:auto !important; bottom:49px !important; right:11px !important; z-index:6000; }
  #block-views-bandeau-block .view-bandeau .views-row .views-field-field-bandeau-resume .desc {
    position:absolute; 
    width: 60% !important; 
    height: auto !important;
    padding: 27px 15px !important;
    left:0 !important;
    font-size: 18px;
    line-height: 20px;
    z-index:6000;
    }
  #block-views-bandeau-block .view-bandeau .views-row .views-field-field-bandeau-resume .desc em.carrouseltitle {
    width: 100% !important;
    font-size: 22px;
    line-height: 24px;
    }
  #block-locale-language { right: 65px; top:21px; margin-left: 0; }
  .nav-mobile { z-index:8000; }
  #nav {
    position: absolute;
    top: 0;
    padding-top: 0;
  }
  #nav:not(:target) {
    z-index: 1;
    height: 0;
  }
  #nav:target .close-btn {
    display: block;
  }
  #nav .close-btn {
    position: absolute;
    top: 15px !important;
    right: 15px;
  }
  #nav .block {
    position: relative;
    padding: 0;
  }
  #nav ul {
    padding:0;
    margin:50px 25px 0;
    list-style:none;
  }
  #nav li {
    position: relative;
    border-top: 1px solid #fff;
    padding:0;
    margin:0;
  }
  #nav li:first-child {
    border-top: none;
  }
  #nav li a {
    display:block;
    padding: 10px 15px !important;
    color:#fff;
    text-decoration:none;
  }
  .js-ready #nav {
    height: 100%;
    width: 80%;
    background: #333333;
  }
  .js-ready #nav .block {
    background: transparent;
  }
  .js-ready #nav .close-btn {
    display: block;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
  }
  .js-ready #nav .close-btn:focus, .js-ready #nav .close-btn:hover {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }
  .js-ready #nav {
    right: 80%;
  }
  .js-ready #inner-wrap {
    right: 80%;
  }
  .js-nav #inner-wrap {
    right: -80%;
  }
  .csstransforms3d.csstransitions.js-ready #nav {
    right: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    -o-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .csstransforms3d.csstransitions.js-ready #inner-wrap {
    right: 80% !important;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -o-transition: -o-transform 500ms ease;
    transition: transform 500ms ease;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .csstransforms3d.csstransitions.js-nav #inner-wrap {
    -webkit-transform: translate3d(-80%, 0, 0) scale3d(1, 1, 1);
    -moz-transform: translate3d(-80%, 0, 0) scale3d(1, 1, 1);
    -ms-transform: translate3d(-80%, 0, 0) scale3d(1, 1, 1);
    -o-transform: translate3d(-80%, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(-80%, 0, 0) scale3d(1, 1, 1);
  }
  .csstransforms3d.csstransitions.js-ready #nav .block {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
    -webkit-transition: opacity 300ms 100ms, -webkit-transform 500ms ease;
    -webkit-transition-delay: ease, 0s;
    -moz-transition: opacity 300ms 100ms ease, -moz-transform 500ms ease;
    -o-transition: opacity 300ms 100ms ease, -o-transform 500ms ease;
    transition: opacity 300ms 100ms ease, transform 500ms ease;
    -webkit-transform: translate3d(80%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -moz-transform: translate3d(80%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -ms-transform: translate3d(80%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -o-transform: translate3d(80%, 0, 0) scale3d(0.9, 0.9, 0.9);
    transform: translate3d(80%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
  }
  .csstransforms3d.csstransitions.js-nav #nav .block {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  #content iframe { width: 100% !important; height: 434px !important; }
  .page-node-8 #content iframe, .page-node-21 #content iframe { height: 1px !important; }

  img.centeralign { max-width: 100% !important; height: auto !important; }
  #content hr { max-width: 100% !important; }
  #content h1 { max-width: 100% !important; }
  #content-area h2 { font-size: 23px; line-height:25px; }
  div.divbesoindinfos { margin-top:5px; }

  #footer { height: auto; margin: 20px auto; }
  #footer .region-footer { padding: 0 20px; }

}

@media screen and (min-width: 641px) and (max-width: 1024px) {

  .front #main #content {  width: 100% !important; float:left !important; margin-right: -300px !important; clear:none !important; }
  .front #main #content #content-inner { width: auto !important; float:none !important;  margin-right: 300px !important; clear:none !important; }
  .front #sidebar-second {  width:270px !important; float:right !important; clear:none !important; }

}

@media screen and (min-width: 1px) and (max-width: 640px) {

#sidebar-second {  width: 100% !important; height:inherit !important; margin:0 !important; float:none !important; clear:none !important; padding:0 !important; background: none; border-top: 1px solid #a8a8a9; }
#sidebar-second-inner { width: auto !important; padding:0 20px !important; }
#sidebar-second .btnvideo { margin: 30px 0 35px 0; padding-bottom: 0; width: auto; text-align:center; border-bottom: 0 !important; }
#sidebar-second .btnvideo img { margin: 0 auto; }
#sidebar-second .logo_fsc { margin: 35px auto 35px; }
#sidebar-second a.environnement { display:block; margin:0 auto; width: 180px; }
a.besoindinfos { display: block; width: 189px; height: 170px; margin: 35px auto 0; }

.not-front #main #content-top { max-width:100% !important; }
.rightalign { float: none; clear: both; width: 100% !important; height:auto !important; margin-left:0 !important; }
.rightalign img { max-width: 100% !important; height:auto !important; }

#content h1 { font-size: 28px; line-height: 30px; }
#content hr { margin: 27px 0px 27px; }

}


@media screen and (min-width: 481px) and (max-width: 640px) { 

    #block-views-bandeau-block, #block-views-bandeau-block .view-content, .front .views-row, .front .views-row img { height:300px !important; }
    #content iframe { height: 300px !important; }
    h4.headerslogan, .not-front p .img_fsc_inside { display:none !important; }

}


@media screen and (min-width: 1px) and (max-width: 480px) { 

    h4.headerslogan, .not-front p .img_fsc_inside { display:none !important; }
    #block-locale-language { right: 15px; top: 50px; }
    #block-locale-language a { width: auto; }

    #block-views-bandeau-block, #block-views-bandeau-block .view-content, .front .views-row, .front .views-row img { height:250px !important; }
    #content iframe { height: 250px !important; }
    .front .views-field-field-bandeau-resume { bottom:0 !important;  }
    #block-views-bandeau-block .view-bandeau #beandeau-cycle-pager { width:187px !important; bottom: 15px !important; left:0 !important; right:0 !important; text-align:center; margin:0 auto; }
    #block-views-bandeau-block .view-bandeau .views-row .views-field-field-bandeau-resume .desc em.carrouseltitle { width:100% !important; font-size: 14px; line-height: 16px; text-align:center; margin:0 auto; }
    #block-views-bandeau-block .view-bandeau .views-row .views-field-field-bandeau-resume .desc { width:100% !important; font-size: 14px; line-height: 16px; padding:12px 0 !important; text-align:center; margin:0 auto; }

    #footer #coord .phone { font-size: 20px; }
    #footer .copyright { display: block; width: 100%; float:left; clear:both; margin:0 0 15px; }

    .not-front div.divbesoindinfos { margin-right:0 !important; margin-bottom:20px !important; }
    .not-front div.divbesoindinfos a.besoindinfos { width: 100px; height: 80px; padding:10px 7px !important; text-align:center;}
    .not-front a.besoindinfos strong { display:block; float:none; margin:0 auto !important; font-size: 15px; line-height: 17px; text-align:center; border-bottom:3px solid #fff; }
    .not-front a.besoindinfos em {  display:block; float:none; font-size: 13px; line-height: 13px; margin:-8px auto 0 !important; text-align:center; }

    .not-front p a.logo_fsc_inside { width:100px !important; height:auto !important; margin:6px 0 35px 35px !important; }
    .not-front p a.logo_fsc_inside img { width:100px !important; height:auto !important; }

}

@media screen and (min-width: 1px) and (max-width: 400px) { 

    .page-node-18 div.divbesoindinfos { display:none !important; }
    #content-area h2 { max-width: 100% !important; word-wrap:break-word; }

}