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

/**
 * ROCSSTI: a CSS base by Nicolas Hoffmann https://rocssti.net/en/
 * Builder: https://rocssti.net/en/builder-css 
 * inspired by http://www.knacss.com/
 * 
 * A Röcssti-quote, only for pleasure:
 * “Röcssti is a revolution.” — Steeve Jobs 
 *
 * ROCSSTI is under MIT license: https://github.com/nico3333fr/ROCSSTI/blob/master/LICENSE
 *
 * 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, datagrid, datalist, details, dialog, figure, footer, header, main, menu, nav, section { display: block; }
audio, canvas, progress, video { display: inline-block; }
abbr, eventsource, mark, meter, time, 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 16px */
  line-height: 1.5;
  margin: 1.5em 0;
}

/* reset buttons, remember to style them in forms */
input, select, textarea, optgroup, button {
  background: transparent;
  border: 0;
  font: inherit;
  /* -webkit-appearance: none; */
}
/* fix display img/iframe */
img,
iframe { vertical-align: middle; }

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

.unstyled {
  padding-left: 0;
  list-style-type: none;
}
[dir="rtl"] ul, 
[dir="rtl"] ol { 
  padding-left: 0; 
  padding-right: 2em;
}
[dir="rtl"] .unstyled {
  padding-right: 0;
}

/* base font size at 10px */
html { 
  font-size: 62.5%;
  /* IE9-IE11 math fixing. See https://connect.microsoft.com/IE/feedback/details/816709/ */
  /* Thanks to @guardian, @victorbritopro, @eQRoeil & Knacss */
  font-size: calc(1em * 0.625);
}
body {
  background: #fff;
  color: #000;
  font-family: 'roboto', Arial, sans-serif;
  font-size: 1.6em; /* equiv 16px */
  line-height: 1.5; /* to update if needed */
}
/* font adaptation */
[dir="rtl"] body {
  font-family: 'Droid Arabic Naskh','roboto', Arial, sans-serif;
}




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

@font-face {
    font-family: 'roboto';
    src: url('fonts/Roboto-Light-webfont.eot');
    src: url('fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Light-webfont.woff2') format('woff2'),
         url('fonts/Roboto-Light-webfont.woff') format('woff'),
         url('fonts/Roboto-Light-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    /*font-family: 'robotolight_italic';*/
	font-family: 'roboto';
    src: url('fonts/Roboto-LightItalic-webfont.eot');
    src: url('fonts/Roboto-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-LightItalic-webfont.woff2') format('woff2'),
         url('fonts/Roboto-LightItalic-webfont.woff') format('woff'),
         url('fonts/Roboto-LightItalic-webfont.ttf') format('truetype'),
         url('fonts/Roboto-LightItalic-webfont.svg#robotolight_italic') format('svg');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    /*font-family: 'roboto_bold';*/
    font-family: 'roboto';
    src: url('fonts/Roboto-Bold-webfont.eot');
    src: url('fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Bold-webfont.woff2') format('woff2'),
         url('fonts/Roboto-Bold-webfont.woff') format('woff'),
         url('fonts/Roboto-Bold-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Bold-webfont.svg#robotolight') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'robotomedium';
	/*font-family: 'roboto';*/
    src: url('fonts/Roboto-Medium-webfont.eot');
    src: url('fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Medium-webfont.woff2') format('woff2'),
         url('fonts/Roboto-Medium-webfont.woff') format('woff'),
         url('fonts/Roboto-Medium-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Medium-webfont.svg#robotomedium') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* other for titles */
@font-face {
    font-family: 'roboto_regular';
    /*font-family: 'roboto';*/
    src: url('fonts/Roboto-Regular-webfont.eot');
    src: url('fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Regular-webfont.woff2') format('woff2'),
         url('fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*
@font-face {
    font-family: 'roboto_slab';
    src: url('fonts/RobotoSlab-Regular-webfont.eot');
    src: url('fonts/RobotoSlab-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/RobotoSlab-Regular-webfont.woff2') format('woff2'),
         url('fonts/RobotoSlab-Regular-webfont.woff') format('woff'),
         url('fonts/RobotoSlab-Regular-webfont.ttf') format('truetype'),
         url('fonts/RobotoSlab-Regular-webfont.svg#roboto_slabregular') format('svg');
    font-weight: normal;
    font-style: normal;

}*/

@font-face {
  font-family: 'Droid Arabic Naskh';
  font-style: normal;
  font-weight: normal;
  src: url('fonts/DroidNaskh-Regular.eot');
  src: url('fonts/DroidNaskh-Regular.eot?#iefix') format('embedded-opentype'),
       url('fonts/DroidNaskh-Regular.woff2') format('woff2'),
       url('fonts/DroidNaskh-Regular.woff') format('woff'),
       url('fonts/DroidNaskh-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Droid Arabic Naskh';
  font-style: normal;
  font-weight: bold;
  src: url('fonts/DroidNaskh-Bold.eot');
  src: url('fonts/DroidNaskh-Bold.eot?#iefix') format('embedded-opentype'),
       url('fonts/DroidNaskh-Bold.woff2') format('woff2'),
       url('fonts/DroidNaskh-Bold.woff') format('woff'),
       url('fonts/DroidNaskh-Bold.ttf') format('truetype');
}




/* calculated via https://rocssti.net/en/builder-css
 * based on http://soqr.fr/vertical-rhythm/ thanks @goetter & @eQRoeil */

h1,
.h1 {
  display: block;
  font-size: 1.625em; /* equiv 26px */
  line-height: 1.84615;
  margin: 0 0 .92308em 0;
}
h2,
.h2 {
  display: block;
  font-size: 1.5em; /* equiv 24px */
  line-height: 1;
  margin: 0 0 .5em 0;
}
h3,
.h3 {
  display: block;
  font-size: 1.375em; /* equiv 22px */
  line-height: 1.09091;
  margin: 0 0 1.09091em 0;
}
h4,
.h4 {
  display: block;
  font-size: 1.25em; /* equiv 20px */
  line-height: 1.2;
  margin: 0 0 1.2em 0;
}
h5,
.h5 {
  display: block;
  font-size: 1.125em; /* equiv 18px */
  line-height: 1.33333;
  margin: 0 0 1.33333em 0;
}
h6,
.h6 {
  display: block;
  font-size: 1em; /* equiv 16px */
  line-height: 1.5;
  margin: 0 0 1.5em 0;
}

[dir="rtl"] h1, [dir="rtl"] .h1,
[dir="rtl"] h2, [dir="rtl"] .h2,
[dir="rtl"] h3, [dir="rtl"] .h3,
[dir="rtl"] h4, [dir="rtl"] .h4 {
  font-family: 'Droid Arabic Naskh','roboto_slab';
}

.uppercase {
  text-transform: uppercase;
}

/*  other useful classes */
.smaller {
  font-size: .625em; /* equiv 10px */
  line-height: 2.4;
  margin: 2.4em 0;
}
.small {
  font-size: .75em; /* equiv 12px */
  line-height: 2;
  margin: 2em 0;
}
.big {
  font-size: 1em; /* equiv 16px */
  line-height: 1.5;
  margin: 1.5em 0;
}
.bigger {
  font-size: 1.125em; /* equiv 18px */
  line-height: 1.33333;
  margin: 1.33333em 0;
}
.biggest {
  font-size: 1.25em; /* equiv 20px */
  line-height: 1.2;
  margin: 1.2em 0;
}

.fs19p { font-size: 1.9rem; line-height: 1.9rem; }
.fs20p { font-size: 2rem; line-height: 2rem; }
.fs26p { font-size: 2.6rem; line-height: 2.6rem; }
.fs40p { font-size: 4rem; line-height: 4rem; }
.fs43p { font-size: 4.3rem; line-height: 4.3rem; }
.fs50p { font-size: 5rem; line-height: 5rem; }
.fs56p { font-size: 5.6rem; line-height: 5.6rem; }


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

.noborder,
iframe,
dialog { border: 0; }

/*
 * 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,
:lang(en) > q,
:lang(ar) > q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
  quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D" "\2018" "\2019";
}
:lang(es) > q {
  quotes: "\00AB" "\00BB" "\201C" "\201D";
}
:lang(ru) > q {
  quotes: "\00AB" "\00BB" "\201E" "\201F";
}
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 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 {
  word-wrap: break-word;
}
@supports (-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto) {
  /*textarea,
  table,
  td,
  th,
  code,
  pre,
  samp,
  div,
  p,*/
  .cut {
    word-wrap: normal;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
  }
}
/* remove hyphenation if needed */
.nocut {
  word-wrap: normal;
}
@supports (-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto) {
  .nocut {
    -webkit-hyphens: none;
    -ms-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;
  table-layout: fixed;
}
/* important, abbr are good */
/* only those with a title are shown */
abbr[title] {
  border-bottom: dotted 1px; 
  cursor: help;
  text-decoration: none;
  /* color inherited from text */
} 

/* text aligns */
.alignright  { text-align: right; }
.aligncenter { text-align: center; }
.alignleft   { text-align: left; }

/* 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;
}

.nodecoration {
  text-decoration: 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
 *****************************************************************
 */

/**
 * layout
 */


/* 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,
.no-scroll { 
  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;
}
.inline-row {
  display: inline-table;
  table-layout: fixed;
}
.line {
  display: table-row;
}
.col {
  display: table-cell;
  vertical-align: top;
}
.col-noalign {
  display: table-cell;
}

/* alignments */
.aligntop    { vertical-align: top; }
.alignbottom { vertical-align: bottom; }
.alignmiddle { vertical-align: middle; }

/* 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%; }
.w4   { width: 4%; }
.w5   { width: 5%; }
.w10  { width: 10%; }
.w20  { width: 20%; }
.w25  { width: 25%; }
.w30  { width: 30%; }
.w33  { width: 33.333%; }
.w40  { width: 40%; }
.w45  { width: 45%; }
.w48  { width: 48%; }
.w49  { width: 49%; }
.w50  { width: 50%; }
.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; }
.mt0-5 { margin-top: .5em; }
.mt1 { margin-top: 1em; }
.mt2 { margin-top: 2em; }
[dir="ltr"] .mr0 { margin-right: 0; }
[dir="ltr"] .mr0-5 { margin-right: .5em; }
[dir="ltr"] .mr1 { margin-right: 1em; }
[dir="ltr"] .mr2 { margin-right: 2em; }
.mb0 { margin-bottom: 0; }
.mb0-5 { margin-bottom: .5em; }
.mb1 { margin-bottom: 1em; }
.mb2 { margin-bottom: 2em; }
[dir="ltr"] .ml0 { margin-left: 0; }
[dir="ltr"] .ml0-5 { margin-left: .5em; }
[dir="ltr"] .ml1 { margin-left: 1em; }
[dir="ltr"] .ml2 { margin-left: 2em; }
.m0 { margin: 0; }
.m0-5 { margin: .5em; }
.m1 { margin: 1em; }
.m2 { margin: 2em; }

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

/* paddings */
.pt0 { padding-top: 0; }
.pt0-5 { padding-top: .5em; }
.pt1 { padding-top: 1em; }
.pt2 { padding-top: 2em; }
[dir="ltr"] .pr0 { padding-right: 0; }
[dir="ltr"] .pr0-5 { padding-right: .5em; }
[dir="ltr"] .pr1 { padding-right: 1em; }
[dir="ltr"] .pr2 { padding-right: 2em; }
.pb0 { padding-bottom: 0; }
.pb0-5 { padding-bottom: .5em; }
.pb1 { padding-bottom: 1em; }
.pb2 { padding-bottom: 2em; }
[dir="ltr"] .pl0 { padding-left: 0; }
[dir="ltr"] .pl0-5 { padding-left: .5em; }
[dir="ltr"] .pl1 { padding-left: 1em; }
[dir="ltr"] .pl2 { padding-left: 2em; }
[dir="ltr"] .pl3 { padding-left: 3em; }
.p0 { padding: 0; }
.p0-5 { padding: .5em; }
.p1 { padding: 1em; }
.p2 { padding: 2em; }

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

.pt60p { padding-top: 60px; }

/* 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;
}
.nonvisible { visibility: hidden; }

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


/**
 * modules
 */





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

/* === page === */
body::before {
  content: 'desktop';
  display: none;
}

.page {
  margin: 0 auto;
  position: relative;
}

.container {
	max-width: 1160px;
	position: relative;
	margin: 0 auto;
	z-index: 3;
}

.containerbig {
	max-width: 1400px;
	position: relative;
	margin: 0 auto;
	z-index: 3;
}

.bg-darkblue { background: #003260; }
.color-darkblue { color: #003260; }

.bg-blue { background: #0055b1; }
.color-blue { color: #0055b1; }

.bg-white { background: #fff; }
.color-white { color: #fff; }

/* --- skip links --- */
.skip {
	position: absolute;
}
/* .skip__link = 1 skip link  */
/* they should be visible not only on focus */
.skip__link {
	color: #fff;
	font-size: 0.8em;
}
/* anyway remember making them visible on focus */
.skip__link:focus,
.skip__link:hover,
.skip__link:active {

}

.switchlang {
	position: absolute;
	right: 0;
	left:0;
	background: url(../images/bg-gradient.png) no-repeat top right;
	z-index: 100;
}

.switchlang__link {
	text-decoration: none;
}

.switchlang__link:hover,
.switchlang__link:focus,
.switchlang__link:active,
.switchlang__link--active {
	color: #000;
}

/* === header === */
.header {

}
.logo {

}

.navigation__item {
	padding: 1em 1.3em;
}
.navigation__link {
	font-weight: bold;
	color: #fff;
	padding: .2em 0;
	border-top: 1px solid #003260;
	border-bottom: 1px solid #003260;
	text-decoration: none;
	text-transform: uppercase;
}
.navigation__link:hover,
.navigation__link:focus,
.navigation__link:active {
	color: #faa838;
}
.navigation__link--active {
	 border-top: 1px solid #faa838;
	 border-bottom: 1px solid #faa838;
}


/* === main content === */
.main {

}

.mosaic-container {
	background: url(../images/images/mosaique-01@2x.jpg) no-repeat center center;
	background-size: cover;
	height: 310px;
}

.mosaic {
	height: 310px;
}

.box--takeaction {
	background: rgba(255, 255, 255, 0.9);
	font-style: italic;
	position: absolute;
	right: 0;
	bottom: 0;
	width: 40%;
}

.box--title {
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
	position: relative;
	color: #003260;
}

.box--title:hover {
	color: #003260;
}

.box--title:after {
	content: "";
	display: inline-block;
	background: url(../images/icons/more.svg) no-repeat 0 0;
	width: 30px;
	height: 30px;
	background-size: contain;
	margin: 0 0 0 .2em;
}

.grid-article { 
	width:22.75%; 
	position: relative;
}

.grid-article--sep { width: 3%; }

.grid-article--sep--nodesktop { display: none; }

.grid-article--title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	font-weight: bold;
	font-size: 17px;
	background: rgba(0, 85, 177, .9);
	padding: .5em 1em;
	margin: 0;
	text-align: center;
}

.button-reload {
	background: #0055b1 url(../images/icons/reload-w.svg) no-repeat center center;
	width: 100px;
	height: 50px;
	border-radius: 50px 50px 0 0;
	position: absolute;
	bottom: -2em;
	left: calc(50% - 50px);
}



.grid-highlight { 
	width:22.75%; 
	position: relative;
}

.grid-highlight--sep { width: 3%; }

.grid-highlight--sep--nodesktop { display: none; }

.grid-highlight--title {
	font-weight: bold;
	font-size: 18px;
}

.grid-highlight--desc {
	color: #000;
	font-style: italic;
	font-size: 16px;
}

.separator-white {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 30px 0 30px;
	border-color: #ffffff transparent transparent transparent;
	margin: 0 auto 2em auto;
	text-align: center;
}

.video-link {
	position: relative;
	display: block;
	width: 100%;
}

.video-link:after {
	content: "";
	position: absolute;
	display: block;
	width: 60px;
	height: 60px;
	background: url(../images/icons/play.svg) no-repeat 0 0;
	background-size: contain;
	left: calc( 50% - 30px);
	top: calc( 50% - 30px);
}

.video-link--title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	font-weight: bold;
	font-size: 14px;
	background: rgba(0, 85, 177, .9);
	padding: .5em 1em;
	margin: 0;
	text-align: center;	
}

.pledge--link:hover { color: #fff; }

.pledge--link:after {
	content: "";
	display: inline-block;
	background: url(../images/icons/more-w.svg) no-repeat 0 0;
	width: 40px;
	height: 40px;
	background-size: contain;
	margin: 0 0 0 .2em;
}

.checklist li {
	list-style: none;
	background: url(../images/icons/check.svg) no-repeat 0 0;
	padding: .3em .3em 1em 4em;
	background-size: auto
}

/* === footer === */
.footer {

}




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

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

/* avoid dummy resize */
textarea {
  resize: vertical;
}
/* remove a Firefox difference on button tag */
button::-moz-focus-inner { border: 0; padding: 0; }

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

/* to adapt to your design */
input,
select,
textarea {
	padding: .6em .5em;
  border: solid 0 #CCC; 
  color: #666;
  background: #f2f2f2;
  font-size: 16px;
  width: 100%;
}

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

/* to adapt to your design */
.button {
  background: #fff;
  color: #000;
}

/*
 * 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;
}

/* 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
 */
/*select:required:invalid,
input:required:invalid,
input:focus:invalid,
textarea:required: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;
}*/

.button-yellow {
	background: #faa838 no-repeat 1em center;
	text-transform: uppercase;
	color: #0055b1;
	padding: .4em 1em;
}

.button-yellow:hover {
	background: #dd8b28;
}

.button-donate {
	font-weight: bold;
	margin: 0 1em 0 0;
}

.button-donate:before {
	content: "";
	width: 20px;
	height: 20px;
	position: relative;
	top:4px;
	display: inline-block;
	background-image: url(../images/icons/heart.svg);
	background-size: contain;
	margin: 0 .5em 0 0;
}

.button-voice {
	font-weight: bold;
	margin: 0 1em 0 0;
	font-size: 23px;
}

.button-voice:before {
	content: "";
	width: 30px;
	height: 30px;
	position: relative;
	top:8px;
	display: inline-block;
	background-image: url(../images/icons/comment.svg);
	background-size: contain;
	margin: 0 .5em 0 0;
}

.button-join {
	font-weight: bold;
	margin: 0 1em 0 0;
	padding: .4em 3em;
	font-size: 23px;
	position: relative;
}

.button-join:after {
	content: "";
	width: 30px;
	height: 30px;
	position: absolute;
	top:.4em;
	right: .2em;
	display: inline-block;
	background-image: url(../images/icons/more.svg);
	background-size: contain;
	margin: 0 .5em 0 0;
}


.button__darkblue {
	display: block;
	color: #fff;
	padding: .6em .5em;
	background: #0055b1;
	text-transform: uppercase;
	width: 100%;
}

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

/* home */





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





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

@media (max-width: 50em) { /* equiv 800px */
   
  /**
   * layout/modules
   */

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

  /* hide unnecessary elements */
  .notablet { display: none; }
  
  /* linearization of floating content/table-layout */
  .autotablet {
    float: none;
    display: block;
    width: auto;
  }
  
  /* margins */
  .ontablet-mt0 { margin-top: 0; }
  .ontablet-mt1 { margin-top: 1em; }
  .ontablet-mt2 { margin-top: 2em; }
  [dir="ltr"] .ontablet-mr0 { margin-right: 0; }
  [dir="ltr"] .ontablet-mr1 { margin-right: 1em; }
  [dir="ltr"] .ontablet-mr2 { margin-right: 2em; }
  .ontablet-mb0 { margin-bottom: 0; }
  .ontablet-mb1 { margin-bottom: 1em; }
  .ontablet-mb2 { margin-bottom: 2em; }
  [dir="ltr"] .ontablet-ml0 { margin-left: 0; }
  [dir="ltr"] .ontablet-ml1 { margin-left: 1em; }
  [dir="ltr"] .ontablet-ml2 { margin-left: 2em; }
  .ontablet-m0 { margin: 0; }
  .ontablet-m1 { margin: 1em; }
  .ontablet-m2 { margin: 2em; }

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

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

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

  /* text aligns */
  .ontablet-alignleft   { text-align: left; }
  .ontablet-aligncenter { text-align: center; }
  .ontablet-alignright  { text-align: right; }

  /**
   * global structure adaptation (page / skip links / header / main content / footer)
   */
  body::before {
    content: 'tablet';
  }
  
  /**
   * inside content (other styles for pages)
   */
   
   .switchlang {
	   font-size: 14px;
	   position: relative
   }
   
   .displaymenu {
	   display: inline-block;
	   position: absolute;
	   top:0;
	   right: 0;
	   height: 37px;
	   width: 37px;
	   background-image: url(../images/icons/burgericon-w.svg);
	   background-position: 0 0;
	   background-size: contain;
	   outline: 0;
	   z-index: 200
   }
   
   .menu-modal-overlay {
	   background: #003260;
	   position: fixed;
	   left: 0;
	   right: 0;
	   bottom: 0;
	   top:0;
	   display: block; 
	   z-index: 100;
   }
   
   .menu-modal-close {
	   position: absolute;
	   top:0;
	   right:0;
	   z-index: 300;
	   height: 37px;
	   width: 37px;
	   background: #000;
	   background-image: url(../images/icons/burgericon-w.svg);
	   background-position: 0 0;
	   background-size: contain;
	   outline: 0;
   }
   
   .menu-modal-close__text { display: none; }
   
   .menu-modal-title { display: none; }
   
   .menu-modal {
	   position: fixed;
	   z-index: 200;
	   left: 0;
	   right: 0;
	   bottom: 0;
	   top:0;
	   display: block;  
   }
   
   .menu-modal__content {
	   max-width: 350px;
	   margin: 0 auto;
	   position: relative;
	   padding: 4em 2em 1em 2em;
	   text-align: left;
   }
   
   	.navigation {
	   border-top:1px solid #0055b1;
	   padding: 1em 0;
	   border-bottom:1px solid #0055b1;
	}
   
    .navigation__item {
		padding: .5em 0em;
	}
	
	.navigation__link {
		font-weight: bold;
		color: #fff;
		padding: .2em 0;
		border-top: 1px solid #003260;
		border-bottom: 1px solid #003260;
		text-decoration: none;
		text-transform: uppercase;
	}
	.navigation__link:hover,
	.navigation__link:focus,
	.navigation__link:active,
	.navigation__link--active  {
		color: #faa838;
	}

	.mosaic-container {
		background: none;
		height: auto;
	}
	
	.mosaic {
		height: auto;
	}
	
	.box--takeaction {
		position: relative;
		width: auto;
		padding: 2em 3em;
	}

	.grid-article { 
		width:48%; 
	}
	
	.grid-article--sep { width: 4%;}
	
	.grid-article--sep--nodesktop { display: inline-block; }
	
	.grid-article--sep--notablet { display: none; }
	
	.grid-highlight { 
		width:48%; 
	}
	
	.grid-highlight--sep { width: 4%; }
	
	.grid-highlight--sep--nodesktop { display: inline-block; }
	
	.grid-highlight--sep--notablet { display: none; }

	

}




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







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

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

  /**
   * layout/modules
   */

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

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

  /* linearization of floating content/table-layout */
  .automobile {
    float: none;
    display: block;
    width: auto;
  }
  
  /* margins */
  .onmobile-mt0 { margin-top: 0; }
  .onmobile-mt1 { margin-top: 1em; }
  .onmobile-mt2 { margin-top: 2em; }
  [dir="ltr"] .onmobile-mr0 { margin-right: 0; }
  [dir="ltr"] .onmobile-mr1 { margin-right: 1em; }
  [dir="ltr"] .onmobile-mr2 { margin-right: 2em; }
  .onmobile-mb0 { margin-bottom: 0; }
  .onmobile-mb1 { margin-bottom: 1em; }
  .onmobile-mb2 { margin-bottom: 2em; }
  [dir="ltr"] .onmobile-ml0 { margin-left: 0; }
  [dir="ltr"] .onmobile-ml1 { margin-left: 1em; }
  [dir="ltr"] .onmobile-ml2 { margin-left: 2em; }
  .onmobile-m0 { margin: 0; }
  .onmobile-m1 { margin: 1em; }
  .onmobile-m2 { margin: 2em; }

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

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

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

  /* text aligns */
  .onmobile-alignleft   { text-align: left; }
  .onmobile-aligncenter { text-align: center; }
  .onmobile-alignright  { text-align: right; }
  
  .fs26p, .fs40p, .fs43p, .fs50p, .fs56p { font-size: 24px; line-height: 24px; }

  /**
   * global structure adaptation (page / skip links / header / main content / footer)
   */
  body::before {
    content: 'mobile';
  }
  
  /**
   * inside content (other styles for pages)
   */
   
   .menu-modal__content .switchlang { 
	   font-size: 0.8em; 
	   border-top:1px solid #0055b1;
	   background: none;
	   padding: 2em 0;
	}
	
	.switchlang__link {
		color: #fff;
	}
	
	.switchlang__link--active, .switchlang__link:hover {
		color: #faa838;
	}

	.grid-article { 
		width:100%; 
	}
	
	.grid-article--sep { display: none; }
	
	.grid-highlight { 
		width:100%; 
	}
	
	.grid-highlight--sep { display: none; }

}




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

@media (max-width: 20em) { /* equiv 320px */

  /**
   * layout/modules
   */

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

  /* hide unnecessary elements */
  .notinymobile { display: none; }

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

  /**
   * global structure adaptation (page / skip links / header / main content / footer)
   */
  body::before {
    content: 'tinymobile';
  }
  
  /**
   * inside content (other styles for pages)
   */


}






/*
 *****************************************************************
 * 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: 0;
    padding: 0;
    position: static;
    width: auto;
    opacity: 1;
    visibility: visible;
    max-height: none;
    display: block;
  }

  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
 *
 */

/*
.is-hidden,
[aria-hidden=true] {
  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;
}