@font-face { font-family: 'MetaRegular'; src: url('../font/MetaCorrWebPro.eot'); src: url('../font/MetaCorrWebPro.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'MetaBold'; src: url('../font/MetaCorrWebPro-Bold.eot'); src: url('../font/MetaCorrWebPro-Bold.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'MetaBoldItalic'; src: url('../font/MetaCorrWebPro-BoldItalic.eot'); src: url('../font/MetaCorrWebPro-BoldItalic.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'MetaRegularItalic'; src: url('../font/MetaCorrWebPro-Italic.eot'); src: url('../font/MetaCorrWebPro-Italic.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'MetaBlack'; src: url('../font/MetaScWebPro-Black.eot'); src: url('../font/MetaScWebPro-Black.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'MetaMedium'; src: url('../font/MetaWebPro-Medium.eot'); src: url('../font/MetaWebPro-Medium.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'MetaLight'; src: url('../font/MetaWebPro-Light.eot'); src: url('../font/MetaWebPro-Light.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'maridavidregular'; src: url('../font/maridavid-webfont.eot'); src: url('../font/maridavid-webfont.eot?#iefix') format('embedded-opentype'), url('../font/maridavid-webfont.woff2') format('woff2'), url('../font/maridavid-webfont.woff') format('woff'), url('../font/maridavid-webfont.ttf') format('truetype'), url('../font/maridavid-webfont.svg#maridavidregular') format('svg'); font-weight: normal; font-style: normal; }


b, strong { font-family: 'MetaBold'; font-weight: normal; } 
i { font-style:italic; } 

img { max-width: 100%; height: auto; }
html, body { min-height: 100%; }


.only-mobile { display: none; }
.only-desktop { display: block; }

.menu > a { display: none; }

a { color: #227faa; }
a:hover { text-decoration: none; }


select { font-family: 'MetaRegular'; color: #0c2c41; }
select option { padding: 5px;  }

input[type="text"] {  background: none repeat scroll 0 0 #FFFFFF; border: 0px solid #FFFFFF; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow:1px 1px 2px 0 #B4B6B6 inset; box-shadow:1px 1px 2px 0 #B4B6B6 inset; padding: 5px; color:#3a4f5e; font-size: 0.95em; font-family: 'MetaRegular'; }


.transition-normal {
	-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
}

/* -----------------------   general   ------------------------------- */

body { background: #a1a5a7; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; padding: 0; font-size: 14px; color: #0c2c41; font-family: 'MetaRegular', Verdana, tahoma, Arial, Helvetica; position: relative; line-height: 19px; }
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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

p, .p-like, ul, ol, dl, blockquote, pre, td, th, label, textarea, caption, details, figure { padding: 0; }
ul, ol { padding-left: 0; }
.row > * { display: block; }



.wrapper { width: 984px; margin: 0 auto; position: relative; }






















/* -----------------------   userbar 1   ------------------------------- */

.userbar1 { padding-bottom: 10px; }
.userbar1 ul { text-align: right; color: #6b7a7e; }
.userbar1 ul li { display: inline; }
.userbar1 ul li a { color: #6b7a7e; text-decoration: none; font-size: 12px; border-right: 1px solid #afb9bc; padding-right: 8px; }
.userbar1 ul li a:hover { text-decoration: underline; }
.userbar1 ul li:last-child a { border-right: 0; padding-right: 0; }
.userbar1 ul li.active a { color: #e84001; cursor: text; }
.userbar1 ul li.active a:hover { text-decoration: none; }




















/* -----------------------   header   ------------------------------- */

header { z-index: 10; border-bottom: 1px solid white; background: white; }
header .logo a { background: url(../img/header/logo.png) no-repeat; display: block; width: 106px; height: 68px; position: absolute; top: -10px;  text-indent: -10000px; }
header a.mathias { display: block; width: 125px; height: 76px; position: absolute; right: 0; top: -2px; }
.fr header a.mathias { background: url(../img/header/mathias-fr.png) no-repeat; }
.nl header a.mathias { background: url(../img/header/mathias-nl.png) no-repeat; }

header .header-1 { margin-left: 158px; padding-top: 20px; }
header .header-1 ul { display: inline-block; }
header .header-1 ul li { display: inline-block; background: url(../img/header/li.png) no-repeat 0 6px; padding-left: 15px; padding-bottom: 7px; margin-right: 20px; }
header .header-1 ul li.active, header .header-1 ul li.active:hover { display: inline-block; background: url(../img/header/li-active.png) no-repeat 0 6px; padding-left: 15px; }
header .header-1 ul li a { color: #e84001; text-decoration: none; font-size: 15px; }
header .header-1 ul li:hover a { color: #3ba4bd; }
header .header-1 ul li:hover { background: url(../img/header/li-hover.png) no-repeat 0 6px; }
header .header-1 ul li.active a, header .header-1 ul li.active:hover a { color: #3ba4bd; }
header .header-1 ul:last-child { margin-left: 155px; }
.nl header .header-1 ul:last-child { margin-left: 119px; }

header .header-2 { margin-left: 142px; height: 27px; 
background: #41abc4; /* Old browsers */
background: -moz-linear-gradient(top,  #41abc4 0%, #39a1b9 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#41abc4), color-stop(100%,#39a1b9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #41abc4 0%,#39a1b9 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #41abc4 0%,#39a1b9 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #41abc4 0%,#39a1b9 100%); /* IE10+ */
background: linear-gradient(to bottom,  #41abc4 0%,#39a1b9 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#41abc4', endColorstr='#39a1b9',GradientType=0 ); /* IE6-9 */
 }
header .header-2 ul { display: inline-block; }
header .header-2 ul li { display: inline-block; padding: 3px; }
header .header-2 ul li a { color: white; text-decoration: none; font-size: 13px; font-family: 'MetaBold'; letter-spacing: 0.03em; }

header .header-2 ul { margin-left: 15px; }
header .header-2 ul li:nth-child(2) a { border-left: 1px solid white; padding-left: 10px; }

header li.myethias { margin-left: 210px; }
header li.myethias a { background: url(../img/header/myethias.png) no-repeat; display: block; width: 137px; height: 47px; display: inline-block; bottom: -5px; position: absolute; }
header .header-2 ul li:last-child { margin-left: 200px; }

header .ombre { background: url(../img/header/ombre.png) no-repeat center; display: block; width: 100%; height: 18px; position: absolute; bottom: -19px; z-index: 10; }





















/* -----------------------   branding 1  ------------------------------- */

#branding { 
background: #c3b497; /* Old browsers */
background: -moz-linear-gradient(left,  #c3b497 0%, #fbf0d2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#c3b497), color-stop(100%,#fbf0d2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #c3b497 0%,#fbf0d2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #c3b497 0%,#fbf0d2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #c3b497 0%,#fbf0d2 100%); /* IE10+ */
background: linear-gradient(to right,  #c3b497 0%,#fbf0d2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3b497', endColorstr='#fbf0d2',GradientType=1 ); /* IE6-9 */

position: relative;
height: 350px; }

#branding #branding-bg { height: 100%; position: relative; }
.fr #branding #branding-bg { background: url(../img/branding/branding-fr.jpg) center top no-repeat; }
.nl #branding #branding-bg { background: url(../img/branding/branding-nl.jpg) center top no-repeat; }


#branding .wrapper { height: 350px; }
#branding .slogan { padding: 35px 0 0 280px; font-family: 'metaregular'; line-height: 40px; float: left; }
#branding .slogan h1 { font-size: 35px; font-family: 'metabold'; }
#branding .slogan h2 { font-size: 30px; font-family: 'metaregular'; line-height: 40px; }


#branding .visu-pastille { position: relative; width: 300px; height: 350px; z-index: 10; }

.fr #branding .visu-pastille-ethiassien { background: url(../img/branding/visu-ethiassien-fr.png) 0 0 no-repeat; position: absolute; display: block; width: 279px; height: 432px; right: 0; bottom: -100px; }
.fr #branding .visu-pastille-content { position: absolute; display: block; width: 127px; height: 176px; left: 9px; bottom: -35px; color: white; text-align: center; font-size: 19px; line-height: 19px; } 

.nl #branding .visu-pastille-ethiassien { background: url(../img/branding/visu-ethiassien-nl.png) 0 0 no-repeat; position: absolute; display: block; width: 279px; height: 432px; right: 0; bottom: -100px; }
.nl #branding .visu-pastille-content { position: absolute; display: block; width: 127px; height: 176px; left: 9px; bottom: -20px; color: white; text-align: center; font-size: 16px; line-height: 19px; } 

#branding .visu-pastille-content span { font-family: 'Metabold'; line-height: 23px; }
#branding .visu-pastille-content span.pastille-1 { font-size: 40px; line-height: 34px; }
#branding .visu-pastille-content span.pastille-2 { font-size: 29px; }

#branding #branding-bg .branding-bottom { background: url(../img/branding/bottom.png) no-repeat; position: absolute; bottom: -54px; display: block; width: 100%; height: 54px; background-size: contain;  }

#branding .rs { position: absolute; right: 50px; bottom: 30px; z-index: 100; }
#branding .rs .rs-fb { display: inline-block; background: url(../img/branding/facebook.png) center bottom no-repeat #3b5998; text-indent: -150000px; width: 26px; padding: 15px 12px; border-radius: 100px; margin-right: 10px; }
#branding .rs .rs-twitter { display: inline-block; background: url(../img/branding/twitter.png) center no-repeat #5ea9dd; text-indent: -150000px; width: 26px; padding: 15px 12px; border-radius: 100px; }



















/* -----------------------   branding 2  ------------------------------- */

#branding-2 { background: #ebf9ff; padding: 120px 0 40px 0; }
#branding-2 .row { display: inline-block; vertical-align: top; }

#branding-2 .row .bloc-1 li strong { color: #e84e0e; }
#branding-2 .row .bloc-1 p a { color: #e84e0e; font-family: 'MetaBold'; font-size: 1.2em; background: url(../img/btn/fleche01.png) right center no-repeat; padding: 5px 30px 0; }
#branding-2 .row .bloc-1 p a:hover { color: #227faa; background: url(../img/btn/fleche02.png) right center no-repeat; }

#branding-2 .row.row1 { width: 68%; }
#branding-2 .row.row1 h3 { font-family:'metaregular'; font-size: 38px; line-height: 30px; color: #227faa; }
.nl #branding-2 .row.row1 h3 { font-size: 33px; }
.nl #branding-2 .row.row1 h3 strong { font-size: 1.2em; }

#branding-2 .bloc-1 { padding: 17px; color: #0b5168 ; margin: 10px 0; background: white; border: 2px dotted #227faa; border-radius: 5px; width: 90%; }
.parents #branding-2 .bloc-1 { margin: 10px 0 10px 40px; width: 80%; }
#branding-2 .row.row1 ul { margin-left: 10px; }
.parents #branding-2 .row.row1 ul { margin-left: 31px; }
#branding-2 .row.row1 ul li { list-style: disc; margin: 5px 0 20px 0; }
#branding-2 .row.row1 ul li:last-child { margin-bottom: 5px; }

#branding-2 .row.row1 p { margin: 20px 0 0 0; }
#branding-2 .row.row1 > p > a { background: url(../img/btn/fleche02.png) right 6px no-repeat; padding: 10px 30px 10px 0; font-size: 15px; font-family: 'Metamedium'; line-height: 21px; }
#branding-2 .row.row1 a:hover { text-decoration: none; }

#branding-2 .row.row2 { text-align: center; width: 31%; }
#branding-2 .row.row2 h3 { font-size: 17px; color: white; display: block; line-height: normal; margin: auto; }
#branding-2 .row.row2 a.btn-01 { text-decoration: none; font-size: 23px; color: white; width: 150px; padding: 14px 62px 14px 0px; display: block; line-height: normal; background: url(../img/btn/fleche03.png) no-repeat right 14px #60bf36; border: 2px solid white; border-radius: 4px; margin: 20px auto; }
.parents #branding-2 .row.row2 a.btn-01 { text-align: left; padding: 14px 62px 14px 12px; background: url(../img/btn/fleche03.png) no-repeat right 24px #60bf36; }
.fr.parents #branding-2 .row.row2 a.btn-01 { background: url(../img/btn/fleche03.png) no-repeat right 37px #60bf36; }
#branding-2 .row.row2 a.btn-01 strong { text-decoration: underline; }
#branding-2 .row.row2 a.btn-01:hover strong { text-decoration: none; }

#branding-2 .row.row2 .starterpack { display: block; padding: 7px 61px 7px 7px; margin: auto; width: 144px; -webkit-box-shadow:3px 3px 5px 0 #d9e6ec inset; box-shadow:3px 3px 5px 0 #d9e6ec inset; text-align: left; position: relative; font-family: 'maridavidregular'; font-size: 19px; letter-spacing: 0.05em; line-height: 23px; text-decoration: none; color: #3a4f5e; -webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
background: white; }
#branding-2 .row.row2 .starterpack:hover { color: #ec7e20; background: none; -webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease; }
#branding-2 .row.row2 p { margin: 10px 0; }
#branding-2 .row.row2 p:first-child { margin-top: 0; }
#branding-2 .row.row2 p:last-child { margin-bottom: 0; }
#branding-2 .row.row2 .starterpack-visu { display: block; width: 111px; background: url(../img/content/starterpack-right.png) top right no-repeat; height: 185px; position: absolute; right: -30px; top: -6px; }
#branding-2 .row.row2 .starterpack .starterpack-fleche { display: block; width: 34px; background: url(../img/btn/fleche04.png) top right no-repeat; height: 34px; position: absolute; right: 36px; bottom: 2px; -webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease; }
#branding-2 .row.row2 .starterpack:hover .starterpack-fleche { right: 6px; -webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;}
#branding-2 .row.row2 .starterpack .starterpack-1 { color: #ec7e20; font-size: 24px; }
.nl #branding-2 .row.row2 .starterpack .starterpack-1 { font-size: 21px; }






















/* -----------------------   content  ------------------------------- */

.content { padding: 40px 0; background: white; position: relative; border-bottom: 1px solid #ff4e00; }

.content-bis .citation { padding: 20px 0; }
.content-bis .citation .citation-content { position: relative; padding: 0 0px; width: 71%; display: inline-block; }
/*.content-bis .citation .citation-content:before { content:''; background: url(../img/com/guillemets-1.png) no-repeat; width: 45px; height: 35px; display: block; position: absolute; left: 0; }
.content-bis .citation .citation-content:after { content:''; background: url(../img/com/guillemets-2.png) no-repeat; width: 45px; height: 35px; display: block; position: absolute; right: 0; bottom: 0; }*/
.content-bis .citation .citation-content h1 { font-family:'MetaBold'; font-size: 26px; line-height: normal; color: #0b5168; }
.content-bis .citation .citation-content p { font-family:'MetaRegular'; }

.content-bis .citation .pastille { width: 151px; height: 111px; display: inline-block; }
.fr .content-bis .citation .pastille { background: url(../img/content/pastille-fr.png) right center no-repeat; }
.nl .content-bis .citation .pastille { background: url(../img/content/pastille-nl.png) right center no-repeat; }


.content .wrapper .groupe-ethiassien { background: url(../img/content/groupe-ethiassien.png) no-repeat right bottom; display: block; background-size: contain; width: 100%; height: 217px; position: absolute; bottom: -78px; z-index: 100; }
.content .row { display: inline-block; vertical-align: top; }
.content .row.row1 { width: 50%; }
.content .row.row2 { width: 45%; position: relative; min-height: 258px; }

.content h3 { font-size: 27px; color: #0097d0; width: 83%; line-height: normal; }


.content a.btn-02 { text-decoration: none; font-size: 20px; font-family: 'Metamedium'; color: white; width: 150px; padding: 11px 62px 12px 17px; display: block; line-height: normal; background: url(../img/btn/fleche05.png) no-repeat right 13px #ff4e00; border: 2px solid white; border-radius: 4px; margin: 20px 0; }

.content .bloc-2 { display: block; width: 100%; height: 40px; position: relative; }
.content .bloc-2 .bloc-2-contain { background: url(../img/content/bloc-2.png) no-repeat center; display: block; width: 100%; height: 40px; background-size: contain; position: absolute; top: 1px; }



.content2 { padding: 10px 0; background: #ebf9ff; position: relative; font-size: 12px; }
.content2 .ombre { background: url(../img/content/ombre.png) center bottom no-repeat; position: absolute; top: 0px; display: block; width: 100%; height: 18px; }











/* -----------------------   postscript  ------------------------------- */

.postscript { padding: 15px 0 0 0; z-index: 0; background: white; }
.postscript .row.row1  { text-align: center; margin: 10px 0; }
.postscript .row.row1 p, .postscript .row.row1 input, .postscript .row.row1 a { display: inline-block; vertical-align: middle; padding: 0 10px; }
.postscript .row.row1 p { font-size: 13px; }
.postscript .row.row1 input { background: none repeat scroll 0 0 #FFFFFF; border: 0px solid #FFFFFF; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow:1px 1px 2px 0 #B4B6B6 inset; box-shadow:1px 1px 2px 0 #B4B6B6 inset; padding: 9px 5px; color:#3a4f5e; font-size: 0.95em; font-family: 'MetaRegular'; }


.postscript .row.row2 { position: relative; text-align: center; padding-bottom: 30px; }
.postscript .row.row2 .tree-1 { background: url(../img/postscript/tree1.png) no-repeat center; display: block; width: 128px; height: 95px; position: absolute; left: -99px; bottom:-2px; }
.postscript .row.row2 .tree-2 { background: url(../img/postscript/tree2.png) no-repeat center; display: block; width: 123px; height: 86px; position: absolute; right: -98px; bottom:-3px; }

.postscript .row.row2 ul li { display: inline-block; font-size: 12px; }
.postscript .row.row2 ul li a { color: #0c2c41; padding: 0 10px; border-right: 1px solid #0c2c41; display: block; line-height: 10px; }
.postscript .row.row2 ul li:first-child a { padding-left: 0; }
.postscript .row.row2 ul li:last-child a { padding-right: 0; border-right: 0; }





















/* -----------------------   footer  ------------------------------- */

.footer { background: #a1a5a7; padding: 20px 0; text-align: center; font-size: 12px; color: #e1e2e3; line-height: 12px; z-index: 10; }
























/* -----------------------   jquery accordion  ------------------------------- */

.ui-state-active .ui-icon { display: none; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background: transparent; border: 0; }
.ui-accordion .ui-accordion-icons { padding-left: 34px; }

.ui-accordion .ui-accordion-header { color: #3ba4bd; position: relative; font-weight: normal; font-family: 'MetaLight'; font-size: 26px; }
.ui-accordion .ui-accordion-header.ui-accordion-header-active { text-decoration: none; cursor: default; color: #e84e0e; }

a.ui-accordion-header:before { background: url(../img/btn/fleche02.png) no-repeat; content: ''; width: 25px; height: 25px; position: absolute; left: 0px; }

a.ui-accordion-header-active:before { background: url(../img/btn/fleche01.png) no-repeat; content: ''; width: 25px; height: 25px; position: absolute; left: 0px; 
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); }

.ui-accordion .ui-accordion-content { background: none repeat scroll 0 0 transparent; border: 0 none; color: #0b5168; font-family: "MetaRegular"; font-size: 16px; font-weight: normal; padding: 0 2.2em 1em 2.2em; }
.ui-accordion .ui-accordion-content strong { font-family: "MetaBold"; font-size: 16px; font-weight: normal; }


#branding-2 .row #accordion a.infos {
    background: none;
    color: #e84e0e;
    font-family: "MetaBold";
    padding: 5px 5px 4px;
    border-radius: 5px;
    -webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
}


#branding-2 .row #accordion a.infos:after {
    content:' >';
    text-decoration: none;
    background: none;
    font-family: "MetaRegular";
    font-size: 1em;
    padding: 0;
}



#branding-2 .row #accordion a.infos:hover {
    text-decoration: none;
}


.ui-state-default .ui-icon { display: none; }


#branding-2 .row #accordion .bloc-1 p a.classic {
    background: none;
    color: #0b5168;
    font-family: "MetaRegular";
    font-size: 1em;
    padding: 0;
    position: relative;
}
#branding-2 .row #accordion .bloc-1 p a.classic:after {
    content:' >';
    text-decoration: none;
    background: none;
    color: #0b5168;
    font-family: "MetaRegular";
    font-size: 1em;
    padding: 0;
}


.content-bis { background: #f7fdff; padding: 20px 0; }