@charset "UTF-8";
/* UTF-8 before doing anything */

/**
 * ROCSSTI : a CSS base by Nicolas Hoffmann http://rocssti.net/
 * inspired by http://www.knacss.com/
 *
 * ROCSSTI is under CC-BY licence : http://creativecommons.org/licenses/by/3.0/
 *
 * this CSS is provided "as is", without any warranty of any type,
 * author can't be responsible of anything you might do with RÖCSSTI
 *
 * convention (adapt if needed)
 *  .parent
 *  .parent__child
 *  .parent--modifier  
 * 
 * RTL = Right To Left =>
 * to adapt a website in a language that is written from right to left
 * designed for multilingual websites with LTR et RTL
 *
 *
 * summary
 * 01 -- reset
 * 02 -- webfonts + Hx structure
 * 03 -- useful classes (utils) + typo fix + styles for "fixed tags"
 * 04 -- links + icons
 * 05 -- layout & modules
 * 06 -- structure (page / skip links / header / main content / footer)
 * 07 -- forms
 * 08 -- inside content
 * 09 -- minor breakpoints between desktop and tablets
 * 10 -- tablets - major breakpoint
 * 11 -- minor breakpoints between tablets and mobile
 * 12 -- mobile - major breakpoint
 * 13 -- minor breakpoints for very small mobiles
 * 14 -- print
 * 15 -- fix viewport
 * 16 -- state classes
 * 17 -- bonus : Fixes IE
 */




/*
 *****************************************************************
 * 1 -- reset
 *****************************************************************
 */

/* for HTML 5 */
article, aside, audio, canvas, datagrid, datalist, details, dialog, figure, footer, header, main, menu, nav, section, video { display: block; }
abbr, eventsource, mark, meter, time, progress, output, bb { display: inline; }

/* to comment/fallback if you care about IE<8 */
html { box-sizing: border-box; }
*, *:before, *:after {
  box-sizing: inherit;
}

/* reset minimum */
html, body, blockquote, ul, ol, form, button { margin: 0; padding: 0; }
button { border: 0; }
p, ul, ol, dl, blockquote, pre, td, th, label, textarea {
  font-size: 1em; /* equiv 14px */
  line-height: 1.5;
  margin: 1.5em 0;
}

/* fix display img/iframe */
img,
iframe { vertical-align: middle; }

ul, ol { padding-left: 2em; }

/* RTL */
[dir="rtl"] ul,
[dir="rtl"] ol {
  padding-left: 0;
  padding-right: 2em;
}



/* base font size at 10px */
html { 
  font-size: 62.5%;
  /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
  /* Thanks to @guardian, @victorbritopro, @eQRoeil & Knacss */
  font-size: calc(1em * 0.625);
}
body {
  background: #fff;
  color: #333;
  font-family: 'KlavikaLight';
  font-size: 1.4em; /* font-size equiv to 14px */
  line-height: 1.5; /* to update if needed */
}




/*
 *****************************************************************
 * 02 -- webfonts + Hx structure 
 *****************************************************************
 */ 

@font-face {
  font-family: 'KlavikaLight';
  src: url('../webfonts/KlavikaWebBasicLight.eot?') format('eot'), url('../webfonts/KlavikaWebBasicLight.woff') format('woff');
  font-weight: normal;
}


@font-face {
  font-family: 'KlavikaLightItalic';
  src: url('../webfonts/KlavikaWebBasicLightItalic.eot?') format('eot'), url('../webfonts/KlavikaWebBasicLightItalic.woff') format('woff');
  font-weight: normal;
}

@font-face {
  font-family: 'KlavikaRegular';
  src: url('../webfonts/KlavikaWebBasicRegular.eot?') format('eot'), url('../webfonts/KlavikaWebBasicRegular.woff') format('woff');
  font-weight: normal;
}

/* calculated by http://soqr.fr/vertical-rhythm/ thanks @goetter & @eQRoeil */

h1,
.h1 {
  display: block;
  font-size:  1.8571em; /* equiv 26px */
  line-height: 1.6154;
  margin: 1.6154em 0 .8077em 0;
}
h2,
.h2 {
  display: block;
  font-size: 16px;
  font-weight: normal;
  text-transform: uppercase;
  margin: 1.2em 0 0.5em 0;
}
h3,
.h3 {
  display: block;
  font-size: 1.5714em; /* equiv 22px */
  line-height: 1.909;
  margin: 1.909em 0 .9545em 0;
}
h4,
.h4 {
  display: block;
  font-size: 1.4286em; /* equiv 20px */
  line-height: 1.05;
  margin: 2.1em 0 1.05em 0;
}
h5,
.h5 {
  display: block;
  font-size: 1.2857em; /* equiv 18px */
  line-height: 1.1667;
  margin: 2.3334em 0 1.1667em 0;
}
h6,
.h6 {
  display: block;
  font-size: 1.1429em; /* equiv 16px */
  line-height: 1.3125;
  margin: 2.625em 0 1.3125em 0;
}

p, .p{
 margin-top: 0.5em;
 margin-bottom: 1.2em;
}

.uppercase {
  text-transform: uppercase;
}

/*  other useful classes */
.smaller {
  font-size: .7143em; /* equiv 10px */
  line-height: 2.1;
  margin: 2.1em 0;
}
.small {
  font-size: .8571em; /* equiv 12px */
  line-height: 1.75;
  margin: 1.75em 0;
}
.big {
  font-size: 1.1429em; /* equiv 16px */
  line-height: 1.3125;
  margin: 1.3125em 0;
}
.bigger {
  font-size: 1.2857em; /* equiv 18px */
  line-height: 1.1667;
  margin: 1.1667em 0;
}
.biggest {
  font-size: 1.4286em; /* equiv 20px */
  line-height: 1.05;
  margin: 1.05em 0;
}




/*
 *****************************************************************
 * 03 -- useful classes (utils) + typo fix + styles for "fixed tags"
 *****************************************************************
 */

.noborder,
iframe { border: 0; }

table {
  table-layout: fixed;
}

/*
 * taken from http://tinytypo.tetue.net/ made by @tetue
 * tuned with the help of http://www.nicolas-hoffmann.net/utilitaires/codes-hexas-ascii-unicode-utf8-caracteres-usuels.php
 *
 * see http://en.wikipedia.org/wiki/International_variation_in_quotation_marks for reference
 */
q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
  quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D" "\2018" "\2019";
}
:lang(en) > q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(es) > q {
  quotes: "\00AB" "\00BB" "\201C" "\201D";
}
:lang(it) > q {
  quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D";
}
:lang(de) > q {
  quotes: "\201e" "\201c" "\201a" "\2018";
}
q:before {
  content: open-quote;
}
q:after {
  content: close-quote;
}

/* avoid ugly line-height */
sup,
sub {
  vertical-align: 0;
  position: relative;
}
sup {
  bottom: 1ex;
}
sub {
  top: .5ex;
}

/* avoid margin problems */
h1:first-child,.h1:first-child,
h2:first-child,.h2:first-child,
h3:first-child,.h3:first-child,
h4:first-child,.h4:first-child,
h5:first-child,.h5:first-child,
h6:first-child,.h6:first-child {
  margin-top: 0;
}
/* remove bottom margin on last child */
p:last-child,
ul:last-child,
ol:last-child,
dl:last-child,
blockquote:last-child,
pre:last-child,
table:last-child {
  margin-bottom: 0;
}

/* avoid margin on nested elements */
li p,
li ul {
  margin-bottom: 0;
  margin-top: 0;
}
/* Thou shalt not pass (Moïse or Gandalf, don't remember) */
textarea,
table,
td,
th,
code,
pre,
samp,
div,
p,
.cut {
}
/* remove hyphenation if needed */
.nocut {
  word-wrap: normal;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  -o-hyphens: none;
  hyphens: none;
}

code,
pre,
samp {
  white-space: pre-wrap;
}
code {
  line-height: 1;
}
kbd {
  border: solid 1px;
  border-top-left-radius: .5em;
  border-top-right-radius: .5em;
  padding: 0 .25em;
}
table {
  margin-bottom: 1.5em;
}
/* important, abbr are good */
/* only those with a title are shown */
abbr[title] {
  border-bottom: dotted 1px; 
  cursor: help;
  /* color inherited from text */
} 

/* text aligns */
.alignright  { text-align: right; }
.aligncenter { text-align: center; }
.alignleft   { text-align: left; }
.aligntop    { vertical-align: top; }
.alignbottom { vertical-align: bottom; }
.alignmiddle { vertical-align: middle; }

/* RTL */
[dir="rtl"] .alignright { text-align: left; }
[dir="rtl"] .alignleft { text-align: right; }






/*
 *****************************************************************
 * 04 -- links + icons
 *****************************************************************
 */

/* links */
a {
  color: #2573be;
  cursor: pointer;
}
/* remember focus */
a:focus,
a:hover,
a:active {
  color: #000;
}
/* avoid border on images in links + fix border image IE */
a:link img,
a:visited img, 
img {
  border-style: none;
}

/* links with icons, may use DATA-URI */

/* external links */
/*a[href^="http://"],
a[href^="https://"] {

}*/
/* if full URL of the website in an internal link, remove icon */
/*a[href^="http://www.mydomaine.com"] {

}*/
/* contact, mailto links */
/*.mail,
a[href^="mailto:"] {

}*/
/* if URL ends with .pdf or whatever */
/*a[href$=".pdf"] {

}*/

/* facto icons */
/*[class*=icon-30] {
display: inline-block;
width: 30px;
height: 30px;
}*/





/*
 *****************************************************************
 * 05 -- layout & modules
 *****************************************************************
 */

/* it depends, it exceeds (french joke) */
img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
svg {
  height: auto;
  max-width: 100%;
}
/* no reset on embed, object & video, some players don't like */

/* useful to manage floats */
/* containing floats */
.mod {
  overflow: auto;
}
.mod--hidden {
  overflow: hidden;
}

/* some floattings */
.left {
  float: left;
}
.right {
  float: right;
}

/* clear floats */
.clear {
  clear: both;
}
.clearleft {
  clear: left;
}
.clearright {
  clear: right;
}
.clearhidden {
  clear: both;
  margin: 0;
  padding: 0;
  visibility: hidden;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* RTL */
[dir="rtl"] .left {
  float: right;
}
[dir="rtl"] .right {
  float: left;
}

[dir="rtl"] .clearleft {
  clear: right;
}
[dir="rtl"] .clearright {
  clear: left;
}

/* gut : "spacing" empty div */
.gut {
  height: 1px;
}

/* table-design in CSS */
.row {
  display: table;
  table-layout: fixed;
}
.col {
  display: table-cell;
  vertical-align: top;
}
.col-noalign {
  display: table-cell;
}


/* block */
.bl {
  display: block;
}

/* inline-block, useful for grids, and not only */
.inbl,
.grid {
  display: inline-block;
}

/* grid = element of inline-grid */
.grid {
  vertical-align: top;
}

/* to relativize */
.relative {
  position: relative;
}

/* centered block */
.center {
  margin-left: auto;
  margin-right: auto;
}

/* hardware-acceleration activation */
.hardware-accelerated {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}



/* block widths */
.w1   { width: 1%; }
.w2   { width: 2%; }
.w3   { width: 3%; }
.w5   { width: 5%; }
.w10  { width: 10%; }
.w15  { width: 15%; }
.w20  { width: 20%; }
.w25  { width: 25%; }
.w30  { width: 30%; }
.w32  { width: 32%; }
.w33  { width: 33.333%; }
.w40  { width: 40%; }
.w45  { width: 45%; }
.w49  { width: 49%; }
.w50  { width: 50%; }
.w58  { width: 58%; }
.w60  { width: 60%; }
.w66  { width: 66.666%; }
.w70  { width: 70%; }
.w75  { width: 75%; }
.w80  { width: 80%; }
.w90  { width: 90%; }
.w100 { width: 100%; }

/* here you may add em widths */
/*.w960e { width: 60em; }*/

/* here you may add pixel widths */
/*.w500p { width: 500px; }*/

/* here you may add em max-widths */
/*.mw960e { max-width: 60em; }*/

/* here you may add pixel max-widths */
/*.mw960p { max-width: 960px; }*/


/* margins */
.mt0 { margin-top: 0; }
.mt1 { margin-top: 1em; }
.mt2 { margin-top: 2em; }
.mr0 { margin-right: 0; }
.mr1 { margin-right: 1em; }
.mr2 { margin-right: 2em; }
.mb0 { margin-bottom: 0; }
.mb1 { margin-bottom: 1em; }
.mb2 { margin-bottom: 2em; }
.ml0 { margin-left: 0; }
.ml1 { margin-left: 1em; }
.ml2 { margin-left: 2em; }
.m0  { margin: 0; }
.m1  { margin: 1em; }
.m2  { margin: 2em; }

/* RTL = warning, use with caution */
[dir="rtl"] .mr0 { margin-left: 0; }
[dir="rtl"] .mr1 { margin-right: inherit; margin-left: 1em; }
[dir="rtl"] .mr2 { margin-right: inherit; margin-left: 2em; }
[dir="rtl"] .ml0 { margin-right: 0; }
[dir="rtl"] .ml1 { margin-left: inherit; margin-right: 1em; }
[dir="rtl"] .ml2 { margin-left: inherit; margin-right: 2em; }

/* paddings */
.pt0 { padding-top: 0; }
.pt1 { padding-top: 1em; }
.pt2 { padding-top: 2em; }
.pr0 { padding-right: 0; }
.pr1 { padding-right: 1em; }
.pr2 { padding-right: 2em; }
.pb0 { padding-bottom: 0; }
.pb1 { padding-bottom: 1em; }
.pb2 { padding-bottom: 2em; }
.pl0 { padding-left: 0; }
.pl1 { padding-left: 1em; }
.pl2 { padding-left: 2em; }
.p0  { padding: 0; }
.p1  { padding: 1em; }
.p2  { padding: 2em; }

/* RTL = warning, use with caution */
[dir="rtl"] .pr0 { padding-left: 0; }
[dir="rtl"] .pr1 { padding-right: 0; padding-left: 1em; }
[dir="rtl"] .pr2 { padding-right: 0; padding-left: 2em; }
[dir="rtl"] .pl0 { padding-right: 0; }
[dir="rtl"] .pl1 { padding-left: 0; padding-right: 1em; }
[dir="rtl"] .pl2 { padding-left: 0; padding-right: 2em; }

/* for 1px-high hr */
hr {
  background-color: #000;
  border: 0;
  color: #000;
  height: 1px;
  margin: 0 0 1em;
  padding: 0;
}

/* to hide text with accessibility… a11y */
.invisible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.hidden    { display: none; } /* hidden everywhere */
.nodesktop { display: none; } /* hidden on desktop */
.noprint   {} /* hidden on print */
.notablet  {} /* hidden on tablets */
.nomobile  {} /* hidden on mobile */




/*
 *****************************************************************
 * 06 -- structure (page / skip links / header / main content / footer)
 *****************************************************************
 */

/* === page === */
#page {
  margin: 0 auto;
  position: relative;
  max-width: 1200px;
  padding: 0 2em;
}

/* --- skip links --- */
.skip {
	display: none;
}
/* .skip__link = 1 skip link  */
/* they should be visible not only on focus */
.skip__link {

}
/* anyway remember making them visible on focus */
.skip__link:focus,
.skip__link:hover,
.skip__link:active {

}



/* --- header --- */
.header {
    margin-top: 30px;
}

.switchlang {
	float: right;
}

.switchlang a {
	display: block;
	float: left;
	text-transform: uppercase;
	font-size: 13px;
	text-decoration: none;
	font-family: 'KlavikaLight', Arial, Helvetica;
	color: #646464;
	padding-right: 4px;
}

.switchlang a:hover, .switchlang .active {
	color: #c6323a;
}

.logo-container {
	height: 100px;
	padding: 10px 0; 
}

.displaymenu {
	border-top:1px solid #b2b2b2;
	border-bottom:1px solid #b2b2b2;
	padding: 7px 1em 7px 0;
	margin: 30px 0 0 0;
	font-family: 'KlavikaLight';
	font-size: 14px;
	line-height: 14px;
	text-transform: uppercase;
	color: #383838;
	text-decoration: none;
}

.navigation {
	margin: 30px 0 0 0;
	padding: 0;
	border-top:1px solid #b2b2b2;
	border-bottom:1px solid #b2b2b2;
	height: 28px;
	font-family: 'KlavikaLight';
	font-size: 14px;
	line-height: 14px;
}
.navigation-item {
	display: inline-block;
}
.navigation-item a {
	text-decoration: none;
	color: #383838;
	display: block;
	padding: 7px 0 0 0;
}
.navigation-text {
	text-transform: uppercase;
	padding: 7px 0 0 0;
}
.navigation-item a:hover, .navigation-item-active a, .navigation-item a.active {
	color: #c6323a;
}
  
  .navigation-item ul {
  	display: none
  }
  
  .navigation li a.parent  {
	position: relative;
	
}

 .navigation li a.parent span {	
	 display: block;
	 position: absolute;
	 top:10px;
	 right: 0;
	 width: 12px;
	 height: 12px;
	background: url(../images/icons/ssmenu-off.png) no-repeat top right;
	
}

.navigation li a.parent-active span {
	background-image: url(../images/icons/ssmenu-on.png);
}

.navigation li a.parent:hover, .navigation li .parent-active {
	color: #c6323a;
}

/* --- main content --- */
.main {
    margin-top: 30px;
    min-height: 450px;
}

.blockhome .block {
	height: 545px;
	display: block;
	background-repeat: no-repeat;
	border: solid 10px #e3e3e3;
	text-decoration: none;
	text-transform: uppercase;
	color: #fff;
	font-size: 25px;
}

.blockhome .block:hover {
	border: solid 10px #c6323a
}

.blockhome .fondation1 {
	background-position: left top;
	background-image: url(../images/home-pic-A1.jpg);
}
.blockhome .fondation2 {
	background-position: left top;
	background-image: url(../images/home-pic-A2.jpg);
}
.blockhome .fondation3 {
	background-position: left top;
	background-image: url(../images/home-pic-A3.jpg);
}
.blockhome .fondation4 {
	background-position: left top;
	background-image: url(../images/home-pic-A4.jpg);
}
.blockhome .fondation span {
	display: block;
	padding: 2em 1em 1em 1em;
}

.blockhome .beneficiaires1 {
	background-position: left top;
	background-image: url(../images/home-pic-B1.jpg);
}
.blockhome .beneficiaires2 {
	background-position: left top;
	background-image: url(../images/home-pic-B2.jpg);
}
.blockhome .beneficiaires3 {
	background-position: left top;
	background-image: url(../images/home-pic-B3.jpg);
}
.blockhome .beneficiaires4 {
	background-position: left top;
	background-image: url(../images/home-pic-B4.jpg);
}
.blockhome .beneficiaires span {
	display: block;
	padding: 13em 1em 1em 1em;
}

.blockhome .projet1 {
	background-position: right top;
	background-image: url(../images/home-pic-C1.jpg);
}
.blockhome .projet2 {
	background-position: right top;
	background-image: url(../images/home-pic-C2.jpg);
}
.blockhome .projet3 {
	background-position: right top;
	background-image: url(../images/home-pic-C3.jpg);
}
.blockhome .projet4 {
	background-position: right top;
	background-image: url(../images/home-pic-C4.jpg);
}
.blockhome .projet span {
	display: block;
	text-align: right;
    padding: 2.5em 2em 1em;
}

/* ------- */
/*

.columnleft ul {
	border-bottom:1px solid #b2b2b2;
	margin: 0;
	padding: 0;
}

.columnleft li {
	border-top:1px solid #b2b2b2;
	list-style: none;
	padding: 0.5em 0;
}

.columnleft li a {
	color: #383838;
	text-decoration: none;
}

.columnleft li a:hover, .columnleft li .active {
	color: #c6323a;
}

.columnleft h2 {
	font-size 14px; 
	color: #c6323a;
}

*/

.columnleft ul {
	margin: 0;
	padding: 0;
}

.columnleft li {
	list-style: none;
}

.columnleft li a {
	list-style: none;
	padding: 0.5em 1em 0.5em 0;
	display: block;
	text-transform: uppercase;
	border-top:1px solid #b2b2b2;
}

.columnleft li ul {
	margin: 0;
	padding: 0;
}

.columnleft li ul li a {
	text-transform: none;
	padding: 0.5em 0 0.5em 15px;
	display: block;
}

.columnleft li ul li ul li a {
	text-transform: none;
	padding: 0.5em 0 0.5em 30px;
	display: block;
}

.columnleft li ul li ul li ul li a {
	text-transform: none;
	padding: 0.5em 0 0.5em 45px;
	display: block;
}

.columnleft li a {
	color: #383838;
	text-decoration: none;
}

.columnleft li a.parent {
	position: relative;
}

.columnleft li a.parent span {
	display: block;
	width:12px;
	height: 12px;
	background: url(../images/icons/ssmenu-off.png) no-repeat top right;
	position: absolute;
	top:10px;
	right:0;
}

.columnleft li a.parent-active span {
	background-image: url(../images/icons/ssmenu-on.png);
}

.columnleft li a.parent:hover, .columnleft li .parent-active {
	color: #c6323a;
}

.columnleft li a:hover, .columnleft li .active {
	color: #c6323a;
}

.columnleft h2 {
	font-size 14px; 
	color: #c6323a;
}

/* ------- */

.content p {
	text-align: justify;
}

.groupgallery img {
	height: 150px;
}

.groupgallery {
	display: inline-block;
	border: solid 10px #e3e3e3;
	text-decoration: none;
}

.groupgallery:hover {
	border: solid 10px #c6323a;
}

.groupgallery span {
	display: block;
	background: #e3e3e3;
	color: #333;
	text-align: center;
	padding: 0.4em 0 0 0;
}

.groupgallery:hover span {
	background: #c6323a;
	color: #fff;
}

.titleproject {
	background: none repeat scroll 0 0 #c6323a;
    color: #fff;
    display: block;
    font-size: 1.2em;
    font-weight: normal;
    line-height: 1.6154;
    margin: 1.6154em 0 0.8077em;
    padding: 3px 10px 1px;
    text-transform: uppercase;
}

.otherlinks a {
	color: #000;
}

.otherlinks a:hover {	
	color: #c6323a;
}

.otherlinks li {
	list-style-image: url(../images/icons/more2_12x12.png);
}

/*.slider {
	height: 400px;
	width: 100%;
	background: #fff;
	border: 1px solid #efefef;
}

.slider div {	
	height: 398px;
	width: 100%;
	display: block;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}*/

/* --- footer --- */
.footer {
	border-top:1px solid #b2b2b2;
    padding-top: 20px;
}

/* in french : Réseaux Sociaux À La Con : Stupid Sharing Buttons… often in footer */
.rsalc {

}




/*
 *****************************************************************
 * 07 -- forms
 *****************************************************************
 */

fieldset {
    background: none repeat scroll 0 0 #e3e3e3;
    border: medium none;
    padding: 30px 20px;
}

.label {
	width: 130px;
	text-align: right;	
}

.mandatory { 
	color: #c6323a;
	}

.auto.uploadfile_contactdoc {
    background: none repeat scroll 0 0 #f6f6f6;
}

/* makes you want to click on */
label,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  cursor: pointer;
}

/* avoid dummy resize */
textarea {
  resize: vertical;
}

label,
button,
input,
select {
  vertical-align: middle;
}

label.label2lignes input {
	vertical-align: top;
}

/* to adapt to your design */
input,
select,
textarea {
  border: 1px solid #c3c3c3;
  width: 70%;
  padding: .5em;
  /** fix typo inputs **/
  font-family: inherit;
  font-size: 1em;
}

/* for field texts */
.label {
  display: inline-block;
  vertical-align: top;
}

/* to adapt to your design */
.button {
  background: #c6323a;
  color: #fff;
  max-width:120px;
  padding: 8px 20px;
  text-transform:uppercase;
  text-decoration:none;
}

.button:hover {
  background: #333333;
  color:#fff;
}

.upload {
	position: relative;
	min-height: 40px;
	display: inline-block;
	top:0px;
	vertical-align: top;
}

#file_upload_doc_rapportUploader, #file_upload_doc_budgetUploader, #file_upload_doc_donUploader, #file_upload_doc_doc1Uploader, #file_upload_doc_doc2Uploader {
	position: absolute;
	top:0px;
}

.mandatory2 {
	display: none;
}

/*
* avoids dimensioning for radio, checkboxes and images
* and a different display on IE
*/
input[type="radio"],
input[type="checkbox"],
input[type="image"] {
  background-color: transparent;
  border: 0;
  width: auto;
}

.upload {

}

.btnupload {
	display: inline-block !important;
	background: #333 !important;
	color: #fff !important;
	border-radius: 0 !important;
	border:0 !important;
	position: absolute !important;
	top:3px !important;
	font-weight: normal !important;
}

/* to cancel input sizing or other if needed */
.auto {
  width: auto;
}

/* error or confirmation messages */
.alert,
.alert input,
.alert textarea,
.alert select {
  color: #bf0000;
  font-weight: bold;
}
/* .redborder is only used to debug */
.alert input,
.alert textarea,
.alert select,
.redborder {
  border: 1px solid #bf0000;
}
.alert img {
  border: 0;
}
.ok {

}

/* can be completed with HTML5 required attribute
* example with a color, remember not only displaying information with it
*/

input:focus:invalid,
textarea:focus:invalid {
  background: #fef6f6;
  -moz-box-shadow: none;
}

input:focus:required:valid,
textarea:focus:required:valid,
select:focus:required:valid {
  background: #efe;
  -moz-box-shadow: none;
}

textarea:required:invalid,
select:required:invalid,
input:required:invalid {  
  background: #f6f6f6;
  -moz-box-shadow: none;
}

/*
 *****************************************************************
 * 08 -- inside content (other styles for pages)
 *****************************************************************
 */

/* home */





/*
 *****************************************************************
 * 09 -- minor breakpoints between desktop and tablets
 *****************************************************************
 */




@media (max-width: 890px) { 

.label {
	text-align: left;
	display: block;
}

}


/*
 *****************************************************************
 * 10 -- tablets - major breakpoint
 *****************************************************************
 */ 

@media (max-width: 48em) { /* equiv 768px */
   
  /* display elements */
  .nodesktop { display: block; }

  /* hide unnecessary elements */
  .notablet { display: none; }
  
  /* linearization of floating content/table-layout */
  .autotablet {
    float: none;
    display: block;
    width: auto;
  }

  /**
   * global structure adaptation (page / skip links / header / main content / footer)
   */

	.blockhome .block {
		height: 240px;
		display: block;
		background-repeat: no-repeat;
		border: solid 10px #e3e3e3;
		text-decoration: none;
		text-transform: uppercase;
		color: #fff;
		font-size: 25px;
	}
	
	.blockhome .block:hover {
		border: solid 10px #c6323a
	}
	
	.blockhome .fondation1 {
		background-position: left top;
		background-image: url(../images/home-mobile-pic-A1.jpg);
	}
	.blockhome .fondation2 {
		background-position: left top;
		background-image: url(../images/home-mobile-pic-A2.jpg);
	}
	.blockhome .fondation3 {
		background-position: left top;
		background-image: url(../images/home-mobile-pic-A3.jpg);
	}
	.blockhome .fondation4 {
		background-position: left top;
		background-image: url(../images/home-mobile-pic-A4.jpg);
	}
	.blockhome .fondation span {
		display: block;
		padding: 2em 1em 1em 5em;
	}
	
	.blockhome .beneficiaires1 {
		background-position: left top;
		background-image: url(../images/home-mobile-pic-B1.jpg);
	}
	.blockhome .beneficiaires2 {
		background-position: left top;
		background-image: url(../images/home-mobile-pic-B2.jpg);
	}
	.blockhome .beneficiaires3 {
		background-position: left top;
		background-image: url(../images/home-mobile-pic-B3.jpg);
	}
	.blockhome .beneficiaires4 {
		background-position: left top;
		background-image: url(../images/home-mobile-pic-B4.jpg);
	}
	.blockhome .beneficiaires span {
		display: block;
		padding: 4em 1em 1em 1em;
	}
	
	.blockhome .projet1 {
		background-position: right top;
		background-image: url(../images/home-mobile-pic-C1.jpg);
	}
	.blockhome .projet2 {
		background-position: right top;
		background-image: url(../images/home-mobile-pic-C2.jpg);
	}
	.blockhome .projet3 {
		background-position: right top;
		background-image: url(../images/home-mobile-pic-C3.jpg);
	}
	.blockhome .projet4 {
		background-position: right top;
		background-image: url(../images/home-mobile-pic-C4.jpg);
	}
	.blockhome .projet span {
		display: block;
		text-align: right;
		padding: 2em 1em 1em 1em;
	}
  
  .label {
	  display: block;
	  text-align: left;
	  float: none;
  }
  
  
  /**
   * inside content (other styles for pages)
   */

}




/*
 *****************************************************************
 * 11 -- minor breakpoints between tablets and mobile
 *****************************************************************
 */



/*
 *****************************************************************
 * 12 -- mobile - major breakpoint
 *****************************************************************
 */

@media (max-width: 40em) { /* equiv 640px */

  /* display elements */
  .notablet { display: block; }

  /* hide unnecessary elements */
  .nomobile, .lSPager { display: none; }

  /* linearization of floating content/table-layout */
  .automobile {
    float: none;
    display: block;
    width: auto;
  }

  /**
   * global structure adaptation (page / skip links / header / main content / footer)
   */
  
  .header {
  	height: auto;
  }

  .navigation {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	padding: 0;
	border-top:0;
  }

  .navigation-item {
	margin: 0.5em 0 0.5em 0;
	padding: 0 0 0 1em;
	background: no-repeat 0 5px url(../images/icons/ssmenu_12x12.png);
  }
  
  .navigation-item-submenu {
	background: no-repeat 0 5px url(../images/icons/ssmenu1_12x12.png);
  }
  
  .navigation-item-submenuactive {
	background: no-repeat 0 5px url(../images/icons/ssmenu2_12x12.png);
  }
  
  .navigation-item ul {
	display: block;
  	list-style: none;
  	padding: 0;
	margin: 0 0 0 0;
	padding: 0.5em 0 0 0;
	border-bottom:0;
  }
  
  .navigation-item ul ul {
	margin: 0 0 0 15px;
	padding: 0 0 0 0;
  }
  
  .navigation-item ul li {
  	list-style: none;
  }
  
  .navigation-item ul li a {
	border-top:1px solid #b2b2b2;
	margin: 0;
	padding: 0.5em 0;
  }
  
  .navigation-item ul ul li a {
	text-transform: none
  }
  
  .navigation-item ul li a {
	  color: #383838;
  }
  
  .navigation-item ul li a:hover {
	  color: #c6323a;
  }
  
  .label {
	  display: block;
	  text-align: left;
	  float: none;
  }
  
  input,
select,
textarea {
  width: 90%;
}

.content p label {
	text-align: left;
}


.btnupload {
	display: block !important;
	position: relative !important;
	top: auto !important
	}
  
  /**
   * inside content (other styles for pages)
   */

}




/*
 *****************************************************************
 * 13 -- minor breakpoints for very small mobiles
 *****************************************************************
 */





/*
 *****************************************************************
 * 14 -- print
 *****************************************************************
 */

@media print {

  /*
   * add in this all elements which need to be hardly reseted for print
   */
  body,
  html,
  #page,
  .reset4print {
    background-color: #fff;
    background-image: none;
    border: 0;
    box-shadow: none;
    color: #000;
    float: none;
    height: auto;
    margin: 0;
    max-width: 100%;
    min-height: auto;
    padding: 0;
    position: static;
    width: auto;
  }

  body {
    padding: .5em;
  }

  /* hide unnecessary elements */
  .noprint {
    display: none;
  }
  
  /* display specific elements for print */
  .onprint {
    display: block;
  }
  
  /* avoid problematic page break */
  blockquote, ul, ol {
    page-break-inside: avoid;
  }
  h1, h2, h3, caption {
    page-break-after: avoid;
  }
  
  /* display links, except for those containing images */
  /* warning, remember checking the result & think to limitate
   * this option only for inside content links */
  /*a:after {
    content: " (" attr(href) ") ";
  }
  a:after img {
    content: "";
  }*/

  /* fix particular properties */


} /* end print */




/*
 *****************************************************************
 * 15 -- fix viewport
 *****************************************************************
 */

/* fix viewport for Win8 (snap mode) and preparing day
 * when viewport will be supported by all render engines
 *
 * Examples : http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
 * width=device-width => width: device-width;
 * height=device-height => height: device-height;
 * initial-scale=2 => zoom: 2;
 * maximum-scale=2 => max-zoom: 2;
 * minimum-scale=0.5 => min-zoom: 0.5;
 * user-scalable=no => user-zoom: fixed;
 *
 * for Win8 snap mode => only width: device-width; works for the moment
 */

@-webkit-viewport {
  width: device-width;
}
@-moz-viewport {
  width: device-width;
}
@-ms-viewport {
  width: device-width;
}
@-o-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}




/*
 *****************************************************************
 * 16 -- state classes
 *****************************************************************
 */

/*
 * State classes = put here to take priority on all classes
 *
 */


.navigation-is-shown {
    display: block;
    margin-bottom: 15px;
}

.navigation-is-hidden {
    display: none;
}




/*
 *****************************************************************
 * 17 -- Bonus: Fixes IE
 *****************************************************************
 */

/*
 * based on conditional classes on HTML element
 *
 * to be used only if there are not to many fixes &
 * small impact on webperfs for other browsers
 *
 */

/* less than IE 9 */
.oldies .nooldies {
  display: none;
}

.ie6 .noie6 {
  display: none;
}
.ie7 .noie7 {
  display: none;
}
.ie8 .noie8 {
  display: none;
}
.ie9 .noie9 {
  display: none;
}

.ie7 .col,
.ie7 .col-noalign,
.ie6 .col,
.ie6 .col-noalign {
  float: left;
}
.ie7 .row,
.ie6 .row {
  overflow: auto;
}

/* RTL */
[dir="rtl"] .ie7 .col,
[dir="rtl"] .ie7 .col-noalign,
[dir="rtl"] .ie6 .col,
[dir="rtl"] .ie6 .col-noalign {
  float: right;
}
loat: right;
}
float: right;
}