/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, 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%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{ display: block; }
body{ line-height: 1; }
ol, ul{ list-style: none; }
blockquote, q{ quotes: none; }
blockquote:before, blockquote:after, q:before, q:after{ content: ''; content: none; }
table{ border-collapse: collapse; border-spacing: 0; }
/*EXOTIC FONTS*/
@font-face{
    font-family: 'frutiger-lightregular';
    src: url('fonts/Frutiger-Light.woff') format('woff2'),
    url('fonts/Frutiger-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family: 'frutiger-romanregular';
    src: url('fonts/FrutigerLTW01-55Roman.svg') format('svg'),
    url('fonts/FrutigerLTW01-55Roman.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family: 'frutiger-bold';
    src: url('fonts/Frutiger-bold.woff2') format('woff2'),
    url('fonts/Frutiger-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/*MAIN STYLES*/
*{ box-sizing: border-box; }
body{ max-width: 960px; margin: 0 auto; font-family: 'frutiger-romanregular', sans-serif; }
em{ font-family: 'frutiger-bold', sans-serif; }
.valign_table{ display: table; height: 100%; width: 100%; }
.valign_row{ display: table-row; }
.valign_cell{ display: table-cell; text-align: center; vertical-align: middle; }
#header{ background-color: #5c9dea; vertical-align: top; margin-bottom: 35px; }
#header h1{ display: inline-block; font-family: 'frutiger-bold', sans-serif; font-size: 30px; line-height: 34px; color: #FFF; vertical-align: top; padding: 70px 0 0 35px; }
#header img{ vertical-align: top; max-width: 248px;}
#header .logo_itl{max-width: 100px; position: absolute; top:5px; left:288px; }
#main{ font-family: 'frutiger-romanregular', sans-serif; font-size: 14px; line-height: 18px; }
#main a{ font-family: 'frutiger-lightregular', sans-serif; }
#main .left{ width: 600px; display: inline-block; font-family: 'frutiger-romanregular', sans-serif; }
#main .left .text{ margin-bottom: 25px; font-family: 'frutiger-romanregular', sans-serif; }
#main .left .article{ margin-bottom: 30px; }
#main .left .article h3{ padding-bottom: 12px; }
#main .left .article .img{ width: 258px; height: 130px; display: inline-block; background-color: #aaaaaa; }
#main .left .article p{ width: 338px; display: inline-block; vertical-align: top; padding-left: 5px; font-family: 'frutiger-romanregular', sans-serif; }
#main .left .article p a{ display: block; margin-top: 14px; color: #5c9dea; font-family: 'frutiger-bold', sans-serif; }
#main .left{ font-family: 'frutiger-bold', sans-serif; }
#main .left a{ text-decoration: none; }
#main .left a:hover{ text-decoration: underline; }
#main .left .content > a:hover{ text-decoration: none; }
#main .left h3 a{ color: #5c9dea; font-size: 20px; line-height: 24px; text-decoration: none; font-family: 'frutiger-bold', sans-serif; }
#main .right{ width: 300px; float: right; display: inline-block; }
#main .right .sidebar-outils{ background-color: #5c9dea; height: 180px; }
#main .right h3{ background-color: #5c9dea; color: #FFF; text-align: center; font-size: 20px; line-height: 20px; font-family: 'frutiger-bold', sans-serif; padding: 15px 0; }
#main .right h3, #main .right .side-content{ margin-bottom: -10px;}
#main .right .side-content{ height: 90px; text-align: center; width: 300px}
#main .right .side-content:last-of-type{ margin-bottom: 20px;  width: 300px}
#main .right .side-content a{ text-decoration: none; color: #FFF; font-family: 'frutiger-lightregular', sans-serif; display: block;background-color: rgba(255,255,255,0.2); padding: 10px; }
#main .right .side-content a:hover{ text-decoration: underline; }
#main .right .side-content .icon-block{ background-color: transparent; border: 1px solid #5c9dea; box-sizing: border-box; display: inline-block; position: relative; float: left; width: 64px; height: 90px; text-align: center; vertical-align: top; }
#main .right .side-content .icon-block .arrow-right{ position: absolute; right: -10px; top: 36px; display: inline-block; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid #5c9dea; }
#main .right .side-content .icon-block img{ max-width: 62px; }
#main .right .side-content .content{ background-color: #5c9dea; color: #FFF; line-height: 16px; font-size: 15px; display: inline-block; float: left; height: 50px; vertical-align: top; width: 300px;}
#main .right .side-content.uniligne .content{ padding: 5px 20px; }
#main .right .side-content.triligne .content{ padding: 8px 20px; }
#main .right .side-content.quadraligne .content{ padding: 10px 20px; }
#main .right .side-video .video{ width: 100%; height: 115px; background-color: #aaaaaa; }
#main .right .side-video .legende p{ font-size: 14px; line-height: 16px; font-family: 'frutiger-bold', sans-serif; background-color: #a48b7b; color: #FFF; padding: 8px; }
#footer{ background-color: #5c9dea; margin-top: 30px; margin-bottom: 15px; position: relative; height: 80px; }
#footer a{ font-family: 'frutiger-romanregular', sans-serif; font-size: 24px; line-height: 24px; text-decoration: none; color: #FFF; }
#footer a:hover{ text-decoration: underline; }
#footer img{ height: 65px; position: absolute; right: 0; top: 4px; }
.publi-redac{ font-size: 14px; font-family: 'frutiger-romanregular', sans-serif; margin-bottom: 30px; text-align: center; }