body { font: 100%/1.5 "Segoe UI",Helvetica,Arial,sans-serif; color: #29353d; margin: 0 auto 50px; max-width: 980px;}
ul, ol, form, button, input, select, textarea, figure {margin:0; padding:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block}  /* Add the correct display in IE 9- */

html {
  font-size: 62.5%; /*10px*/
  font-size: calc(1em * 0.625); /* IE9-IE11 math fixing */
  line-height: 1.15;
  -ms-text-size-adjust: 100%; 
  -webkit-text-size-adjust: 100%;
}
body {
	font: 1.5em/1.5 Open Sans, Helvetica, Arial, sans-serif;
	color: #494b50;
	
} 

/* Titres */ 
h1, h2, h3, h4, h5, h6 { 
  margin: 1em 0 .5em; 
  line-height: 1.4em; 
}
h5, h6 {font-size: 1em} 

/*Images */ 
img {
	border: none;
	vertical-align: middle;
	} 
.bigImg {
	max-width: 100%;
	height: auto;
}
.maxwidth { max-width: 50em}

/* Links */

a {
  background: transparent; 
  -webkit-text-decoration-skip: objects; /* 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */
}
a:hover, a:focus, a:active {text-decoration: none} 
a:hover, a:active {outline: none}

/* Forms */ 

button, input, optgroup, select, textarea {
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button, input {overflow: visible}

select {
    height: 2.5em;
    padding: 0 .7em;
    border-radius: 4px;
    padding: .5em;
    border: 1px solid #e0e5ef;
    transition: all .2s;
    background: #f8f9fc;
}

button, html [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button}

input[type="checkbox"], input[type="radio"] {
	box-sizing: border-box;
	padding:0;
	}
label, button {cursor: pointer}

textarea {
	padding: .5em; 
	resize: vertical;
	overflow:auto;
	}
input[type="search"] {-webkit-appearance: textfield; -webkit-box-sizing: content-box}


/* Citations */ 
blockquote {margin: .75em 0 .75em 20px;} 
blockquote, q {quotes: none}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

q, cite {font-style: italic;}
 
/* Tables */ 
table {
	table-layout:fixed; 
	border-collapse: collapse;
	} 
td, th {vertical-align:middle;}

/* Other */ 
* {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
b, strong {font-weight: bolder} 

p {margin: .8em 0} 

div, textarea, table, td, th {
	word-wrap: break-word;
	-webkit-hyphens: auto;
	   -moz-hyphens: auto;
	    -ms-hyphens: auto; /*IE10+*/
	        hyphens: auto;
}

.ib {display: inline-block} 

svg:not(:root) { overflow: hidden; } /* Hide the overflow in IE */

.hide {
	position:absolute;
	top:-2000em;
	left:-2000em;
	width:1px;
	height:1px;
	overflow:hidden;
	}
.clearfix:before, .clearfix:after {
	content: "";
	display: table; /*format context*/
	}
.clearfix:after {clear: both}
abbr[title] {
	letter-spacing: .1em;
	border-bottom: 1px dotted #000; 
	cursor:help;
	}
	

/* MEDIA QUERIES
---------------------------------------------------------------------------------*/

@-ms-viewport {width: device-width;} /*IE10*/
button, input[type=button] {-webkit-appearance: button}  /*IOS*/

@media print {

	 body {
	  width: auto !important; 
	  margin: auto !important;
	  font-family: serif;
	  font-size: 12pt;
	  background-color: #fff !important;
	  color: #000 !important;
	}
	p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol {
	  color: #000 !important;
	  margin: auto !important;
	}
	* {
		background: transparent !important; 
		color: #444 !important; 
		text-shadow: none;
	}
	a, a:visited {
	  color: #333 !important; 
	  text-decoration: underline;
	  }
	a:after {content: " (" attr(href) ")"}
	abbr:after {content: " (" attr(title) ")"}    
	pre, blockquote {
		border: 1px solid #999; 
		page-break-inside: avoid;
		}    
	img, blockquote, ul, ol {page-break-inside: avoid}	
	
	  @page {margin: 0.5cm}
	  p, h2, h3, blockquote {
	  orphans: 3; /* pas de ligne seule en bas */
	  widows: 3; /* pas de ligne seule en haut */
	  }
	h1, h2, h3, caption {page-break-after: avoid}
		  
	a[href]:after {
	  content: " (" attr(href) ")"; /* affichage des URL des liens */
	}
}

/*Layout*/
#wrapper {
	margin: 0 auto 50px;
	max-width: 980px;
	
	}
main {
	background: #eef0f4;
	padding: 40px 50px;
	}


/* HEADER
----------------------------*/
#logo { float:left}
@media only screen and (max-width: 1000px) { #logo {margin-left:  15px} }
        
header {
    position: relative;
}
header nav ul {
	float:right;
	margin: 25px 0 0;
	}
	header nav li {
		display: inline-block;
		margin: 0 0.35em;
		}
	header nav a {
		text-decoration:none;
		color: #828a98;
        font: 1.05em Open Sans, Helvetica, Arial, sans-serif;
		}
	.selected { 
		color:#2054ab; 
		font-weight: 600;
		}
#nav_toggle {
  display: none;
}

#banner {
    min-height:  245px;
	padding: 10px 35px;
    border-radius: 5px 5px 0 0;
    background-image: url(../images/gdpr_banner.jpg);
    background-size: cover;
    border-bottom: 1px solid #bed4e4;
    border-top: 1px solid #dce9f3;
	} 
    #banner > p  {
        font: 600 1.2em/1.4em Open Sans, Helvetica, Arial, sans-serif;
        color: #fff026;
        text-align: right;
        max-width:  18em;
        letter-spacing: -0.02em;
        margin: 3em 0 0 11%;
        border-right: 2px solid rgba(0, 157, 221, .47);
        padding-right: .5em;
        } 
    #banner > p > span  {
        color: #FFF;
        font-weight: bold;
        font-size:  1.2em;
} 




/*Main
--------------------*/

main img {
    /* max-width: 100%; */
    height: auto;
    
	
	}

main h1 { 
	color: #2053b9;
    margin-top: 0;
    font: 200 3.6rem Open Sans, Helvetica, Arial, sans-serif;
    text-transform: ;
    text-transform: uppercase;
    border-bottom: 1px solid #ced3dc;
    padding-bottom: .2em;
    letter-spacing: 1px;
}
.home h1 { 
	font-size: 2em;
    text-transform: none;
}

main h2 { 
    font: 2.8rem Open Sans, Helvetica, Arial, sans-serif;
    color: #494b50;
}

.col2 { column-count: 2; }
.btn {
  display: inline-block;
  vertical-align: middle;
  color: #FFF;
  background: #4777d8;
  text-decoration: none;
  padding:  .6em 1.5em;
  border-radius: 4px;
  transition: all .1s;
}
.btn:hover {
    background: #2053b9;
}
.red {
  background: #d84747;
}

.red:hover {
  background: #b92020;
}

.green {
  background: #48b449;
}

.green:hover {
  background: #038700;    
}

.left { float: left}
.right { float: right}

a {
    color: #2053b9;
}
form {
    padding-top: 1.5em;
    padding: 1em 2em;
    border: 1px solid #c7cdda;
    border-radius: 10px;
    margin-top: 2.5em;
}
.join input[type="text"] { max-width: 70%;}
label:not(.label_checkbox) {
    display: block;
    margin: 0 0 .5em .3em;
    font-weight: bold;
    color: #838c9c;
}
input, textarea {
    border-radius: 4px;
    padding: .5em;
    border: 1px solid #e0e5ef;
    transition: all .2s;
    background: #f8f9fc;
    }
input {
    height: 2.8em;
    padding: 0 .7em;
    }
    input:focus, textarea:focus, select:focus {
        outline: none;
        border-color: #FFF;
        background: #FFF;
        }
input[type="text"] { margin-right:  .5em}

textarea { width:39em; }
@media only screen and (max-width: 745px) { textarea { width:100%;} }


/*CHECKBOX*/

.checkbox, .checkbox + label {vertical-align: middle}
input[type="checkbox"] {
    position: absolute;
    cursor: pointer;
    height: 3em;
    width: 2em;
    border: none;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
}
input[type="checkbox"] + .checkbox:before {
    display: inline-block;
    width: 1.4em;
    height: 1.4em;
    margin-right: .5em;
    line-height: 1.3em;
    text-align: center;
    background: #f8f9fc;
    border: 1px solid #9a9fb5;
    border-radius: .3em;
    content: "\2713";
    color: transparent;
    font-weight: bold;
    transition: all .1s;
}
input[type="checkbox"]:checked + .checkbox:before {
    border-color: #0658a2;
    background-color: #0658a2;
    color: #fff;
}

/*Tables*/
.table {
    display: table;
    box-shadow: 0 0 0 2px #c5c9d2;
    border-radius: 5px;
    overflow: hidden;
}
.table > table {
    border-style: hidden;
    background: #FFF;
    border-radius: 5px;
}
table.alter tr:nth-child(even) {background: #f3f4f7}

.code {
    box-shadow: 0 0 0 2px #c5c9d2;
    border-radius: 5px;
    padding: 5px;
    background: #FFF;
}

td, th {
    padding: .7em  1em;
    border-right: 1px solid #c5c9d2;
    border-top: 1px solid #c5c9d2   
}

tr:last-child td:first-child {border-bottom-left-radius: 5px}
tr:last-child td:last-child {border-bottom-right-radius: 5px}

tr.highlight th { background: #4777d8; color: white; }

.FlatTable { 
  box-shadow: 0 0 0 2px #c5c9d2;
  border-radius: 5px;
}
.FlatTable td, th {     
  padding: .7em  1em;
  border-right: 1px solid #c5c9d2;
  border-top: 1px solid #c5c9d2   
}
.clRowHeader { 
  background: #f3f4f7;
  font-weight: bold;
}
.clRowHeader td { font-weight: bold; }
.clRowDark { background: #f3f4f7; }
.clRowLight { background: #FFF; }
.FlatTable tr:last-child td:first-child { border-bottom-left-radius: 5px }
.FlatTable tr:last-child td:last-child { border-bottom-right-radius: 5px }

.FormTable {
	border-collapse: collapse;
  width: 100%;
}
table.FormTable > tbody > tr > td {
	line-height: 1.5em;
	text-align: left;
	padding: .2em .5em;
  border: 0;
  vertical-align: initial;
}
table.FormTable > tbody > tr > td:first-child {
	text-align: right;
  width: 20%;
}
table.FormTable > tbody > tr > td:first-child > label {
  margin: 0.5em 0 0 0;
}

/*Contact*/
.IconSentences {margin: 2em 0 0 }
.IconSentences li {
  display: flex;
  list-style: none;
/*  margin: 1em 0; */
}
    .IconSentences .checkbox { float: left; margin: .9em .5em 0 0;}
    .IconSentences .label_checkbox {
        display: block;
        overflow: hidden;
        /* background-position: 0; */
        background-repeat: no-repeat;
        padding-left: 60px;
        min-height: 3em;
    }
   



/*Footer
--------------------*/
footer {
	padding: 20px;
	background: #d1d5de url(../images/footer_bg.png) no-repeat right;
	background-size: cover;
	border-radius: 0 0 5px 5px;
	}
footer h2 {
	margin-top:0;
	text-transform: uppercase;
	font-weight: normal;
	color: #2053b9;
	font-size: 1em;
	letter-spacing: .1em; 
	}
#links {
	display: table;
	margin: 0 auto;
	}
	#links > .ib {
		vertical-align: top;
		margin: 0 2em;
	}
	#links li { margin-bottom: .3em; list-style: none}
		#links a {
			color:#4a4c50;
			text-decoration:none;
			font-size: .8em;
			}

#CookieFooter {
	display: none; 
	position: fixed; 
	bottom: 0;
	z-index: 1000; 
	width: 100%; 
	padding: .8em 1em .5em; 
	background: #fffcd4;
	color: #54522e;
	}
	#CookieFooter > p {
		display: table;
		margin: 0 auto;
		text-align: right;
		font-size: .9em;
		}
		#CookieFooter .ib {
			margin: 0 0 .5em 0; 
			max-width: 37em; 
			vertical-align: middle; 
			}
		#CookieFooter button {
			margin: 0 0 0 1em;
			padding: .4em;
			background: #4E60CC;
			border: none;
			border-radius: 4px;
			font-size: 1.1em;
			color: #FFF;
		}
		#CookieFooter a {color:#4e60cc}



/* RESPONSIVES RULES
-----------------------------------------------------------*/

@media only screen and (max-width: 900px) {


#menu {
   position: absolute;
    z-index: 900;
    top: 45px;
    right: 15px;
    margin: 0;
    width: 12em;
    border-radius: 5px;
    border: 1px solid #245dcc;
    box-shadow: -5px 5px 5px rgba(32, 34, 95, .3);
    transition: all .3s;
}

    #menu li {
        float: none;
        display: block;
        margin: 0;
        border-top: 1px solid #245dcc;
        }
    #menu li:first-child {border: none}
    #menu li:last-child > a {border-radius: 0 0 5px 5px;}
        #menu a {
            display: block;
            color: #98bbff;
            text-align: right;
            padding: .8em 1.1em;
            background: #1348b0;
            font-size: 1.05em;
            letter-spacing: .07em;
            transition: all .2s;
    }
    #menu a:not(.selected):hover {
            color: #fff;
            padding-right: 1.2em;
            background: #245dcc;
            }
        #menu .selected {
            cursor: default;
            color: #fff;
            font-weight: normal;
            background: #0c378c;
}
  

#menu {
    visibility: hidden;
    opacity: 0;
 }


#menu.is-active {
    opacity: 1;
    visibility: visible;
  
}

#nav_toggle {
  display: block;
  position: absolute;
  background: transparent;
  border: 1px solid transparent;
  margin: 2rem 0;
  top: 0;
  right: 15px;
  z-index: 1;
}
#nav_toggle:focus {outline-width: 0}

#nav_toggle [class^='bar-'] {
    background: #245cb9;
    display: block;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transition: .1s ease all;
    border-radius: 4px;
    height: 4px;
    width: 30px;
    margin-bottom: 5px;
}

#nav_toggle .bar-bot { margin-bottom: 0;}

#nav_toggle.opened .bar-top {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 15% 15%;
transform-origin: 0;
}
.opened .bar-mid { opacity: 0;
}
#nav_toggle.opened .bar-bot {
  -webkit-transform: rotate(45deg);
          transform: rotate(-45deg);
  -webkit-transform-origin: 15% 95%;
          transform-origin: 15% 95%;
}

main  { padding: 0.5rem; }

} // @media only screen and (max-width: 900px)

@media only screen and (max-width: 530px) {
.join input[type="text"] { max-width: 100%;}
    
.join .btn {
    display: block;
    margin-top: 1em;
    text-align: center;
}
 
} // @media only screen and (max-width: 530px)