/* CSS Document by Black meridian */

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>   reset                                                <<<< */
/* ------------------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input, select, textarea,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}
body {line-height: 1; color: black; background: white;}
ol,ul {list-style: none;}
table {border-collapse: separate; border-spacing: 0;}
caption,th,td {text-align: left; font-weight: normal;}
img {vertical-align: bottom;}

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>   global                                               <<<< */
/* ------------------------------------------------------------------------- */

html {font-weight: normal;}
body {font: 0.625em/1em 'Open Sans', Arial, Helvetica, sans-serif; color: #6a6a6a; background: #fff; text-rendering: optimizeLegibility;}
h1,h2,h3,h4,h5,h6 {line-height: normal; font-weight: normal;}
p, li {line-height: normal;}
strong {font-weight: bold;}
em {font-style: italic;}
a {color: inherit;}
a:hover,
a:focus {text-decoration: none; outline: none; color: inherit;}
a span,
button {cursor: pointer;}

h1 {position: relative; top: -7px; font-size: 4.2em; line-height: 46px; font-weight: 300; color: #010101;}
h3 {position: relative; top: -5px; font-size: 2.2em; line-height: 26px; font-weight: 300; color: #4a4a4a;}
h3.fr {position: relative; top: -3px; font-size: 1.1em; line-height: 14px; font-weight: normal; font-style: italic; color: #a7abbd;}
h4 {position: relative; top: -4px; margin: 28px 0 9px; font-size: 1em; line-height: 14px; font-weight: 600; text-transform: uppercase; color: #ed1c24;}
h5 {margin-bottom: 12px; font-size: 1.4em; line-height: 18px;}
.fr h5 { font-size: 1.2em; color: #a7abbd; font-style:italic; }


p {margin-bottom: 12px; font-size: 1.4em; line-height: 18px;}

p.fr, .fr p {font-size: 1.2em; line-height: 16px; font-weight: normal; font-style: italic; color: #a7abbd;}
.fr p {margin-bottom: 7px;}
p.en + p.fr {margin-top: -12px;}

h3:last-child,
h4:last-child,
p:last-child {margin-bottom: 0;}

#page {padding: 45px 0;}

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>   classes                                              <<<< */
/* ------------------------------------------------------------------------- */

.overlay {position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; text-indent: -999em; background: url('./images/blank.gif');}

/* reponsive
-------------------------------------*/
.ratio16to9 {padding-bottom: 56.25%;}
.intrinsicRatio {position: relative; height: 0;}
.intrinsicRatio div,
.intrinsicRatio object,
.intrinsicRatio iframe,
.intrinsicRatio embed {position: absolute !important;}

/* nav
-------------------------------------*/
.nav {margin-bottom: 0;}
.nav li {padding-left: 0; font-size: 1em; line-height: normal; background: none;}
.nav li a,
.nav li a:hover,
.nav li a:focus {background: none;}

/* picto
-------------------------------------*/
.picto {display: block; width: 30px; height: 30px; overflow: hidden; text-indent: -999em; background: no-repeat 0 0;}
.picto15 {background-image: url('./images/picto15.png');}
.pictoenCours {background-image: url('./images/pictoenCours.png');}
.pictotermine {background-image: url('./images/pictotermine.png');}

/* titre
-------------------------------------*/
.titre {margin-bottom: 7px;}
.titre h4 {margin-top: 0;}
.titre .picto {float: right; margin: 5px 0 5px 5px;}

/* ditto1projet
-------------------------------------*/
.ditto1projet {margin-bottom: 30px;}
.row:last-child .ditto1projet {margin-bottom: 0}
.ditto1projet .picto {position: absolute; top: 10px; right: 10px; background-position: 0 -30px;}

.ditto1projet .picto:hover,
.ditto1projet .picto.active {background-position: 0 -60px;}
.ditto1projet .image {position: relative; margin-bottom:30px}
.ditto1projet .image img {max-width: 100%;}
.ditto1projet .slideDown {display: none; position: absolute; left: 0; top: 0; right: 0; padding: 20px; background: #dddee5;}
.ditto1projet .slideDown p {font-weight: 300;}

/* ditto1actualite
-------------------------------------*/
.ditto1actualite {position: relative; padding: 20px 10px 25px 20px; background-color: #ebebef;}
.ditto1actualite:nth-child(even) {background-color: #f7f7f9;}
.ditto1actualite .picto {position: absolute; top: 10px; right: 10px;}
.ditto1actualite .titre {margin-right: 40px; margin-bottom: 0;}
.ditto1actualite .langue {position: absolute; left: 0; bottom: 0; padding: 0 4px; height: 15px; font-size: 0.9em; line-height: 14px; font-weight: bold; text-transform: uppercase; color: #fff; background: #b5b5b9}
.ditto1actualite p {font-size: 1.2em; line-height: 16px;}
.ditto1actualite em strong em {position: absolute; bottom: 10px; right: 10px;}
.ditto1actualite em strong em a {display:block; padding-bottom: 2px; border-bottom: 1px solid #000; font-size: 11px; line-height: 14px; font-weight: normal; font-style: normal; color: #4a4a4a;}


.lazy { background:transparent url('./images/loader.gif') center center no-repeat}

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>   header                                               <<<< */
/* ------------------------------------------------------------------------- */

#header > .container {padding-bottom: 60px; background: url('./images/header-border.gif') repeat-x 0 64px;}

#logo {text-indent: -2px;}

#nav {zoom: 1;}
#nav:before,
#nav:after {display: table; clear: both; content: "";}
#nav .nav {float: right;}
#nav .nav li {float: left; margin: 0 20px;}
#nav .nav li.first {margin-left: 0;}
#nav .nav li.last {margin-right: 30px;}
#nav .nav li a {display: block; position: relative; padding-bottom: 56px; height: 32px; text-align: center; background: no-repeat;}
#nav .nav li a .text {font-size: 1.4em; line-height: 18px;}
#nav .nav li a .text.fr {font-size: 1.1em; line-height: 14px; font-weight: normal; font-style: italic; color: #a7abbd;}
#nav .nav li a .icon {position: absolute; left: 50%; bottom: 0; margin-left: -24px; width: 48px; height: 48px; overflow: hidden; background: url('./images/nav-icons.png') no-repeat 48px 48px;}

#nav .nav li#item49 a .icon {background-position: 0 0;}
#nav .nav li#item49 a:hover .icon,
#nav .nav li#item49 a:focus .icon,
#nav .nav li#item49.active a .icon {background-position: -48px 0;}

#nav .nav li#item50 a .icon {background-position: 0 -48px;}
#nav .nav li#item50 a:hover .icon,
#nav .nav li#item50 a:focus .icon,
#nav .nav li#item50.active a .icon {background-position: -48px -48px;}

#nav .nav li#item51 a .icon {background-position: 0 -96px;}
#nav .nav li#item51 a:hover .icon,
#nav .nav li#item51 a:focus .icon,
#nav .nav li#item51.active a .icon {background-position: -48px -96px;}

#nav .nav li#item52 a .icon {background-position: 0 -144px;}
#nav .nav li#item52 a:hover .icon,
#nav .nav li#item52 a:focus .icon,
#nav .nav li#item52.active a .icon {background-position: -48px -144px;}

#nav .nav li#item48 a .icon {background-position: 0 -192px;}
#nav .nav li#item48 a:hover .icon,
#nav .nav li#item48 a:focus .icon,
#nav .nav li#item48.active a .icon {background-position: -48px -192px;}

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>   maincontent                                          <<<< */
/* ------------------------------------------------------------------------- */

#aside .titre {margin-bottom: 62px;}
#aside .textes {margin-bottom: 62px;}


/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>   maincontent                                          <<<< */
/* ------------------------------------------------------------------------- */

.liste1image { margin-bottom:20px; text-align:center}


/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>   1 projet                                             <<<< */
/* ------------------------------------------------------------------------- */

.template8 .news {margin-top:60px}

.template8 .news .titre {margin-bottom:0px !important}
.template8 #aside a {text-decoration: underline;}

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>   mediaqueries                                         <<<< */
/* ------------------------------------------------------------------------- */

@media (min-width: 1200px) {
  #nav .nav li {margin: 0 20px;}
}

@media (min-width: 768px) and (max-width: 979px) {
  #header > .container {background-position: 0 132px;}
  #header > .container > .row > [class*="span"] {float: none; width: auto;}
  #logo {padding-bottom: 22px;}
  #nav .nav {float: none; text-align: center;}
  #nav .nav li {display: inline-block; float: none; margin: 0 18px;}
}

@media (max-width: 767px) {
  #page {padding: 20px;}

  .row {margin-bottom: 30px;}
  .row:last-child {margin-bottom: 0;}
  .row:last-child .ditto1projet {margin-bottom: 30px;}

  .ditto1projet .image {display: inline-block; max-width: 100%;}

  #header > .container {padding-bottom: 30px; background: none;}
  #logo {padding-bottom: 16px;}

  #nav {padding: 16px 0; border: solid #d8d9df; border-width: 1px 0;}
  #nav .nav {float: none;}
  #nav .nav li {position: relative; float: none; margin: 0;}
  #nav .nav li a {display: table-cell; padding-bottom: 0; padding-left: 58px; height: 48px; vertical-align: middle; text-align: left;}
  #nav .nav li a .icon {left: 0; top: 50%; bottom: auto; margin-left: 0; margin-top: -24px;}

  #maincontent [class*="span"] {margin-bottom: 30px;}
  #maincontent [class*="span"]:last-child {margin-bottom: 0;}
}