/* GENERAL - RESET CSS */ 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 {border : 0;font-size : 100%;font : inherit;vertical-align : baseline;margin : 0;padding : 0;-webkit-tap-highlight-color : rgba(0, 0, 0, 0);} 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 : none} table {border-collapse : collapse;border-spacing : 0} textarea:focus, input[type="text"]:focus {outline : none} .hide {display : none;} /* FONTS : font Cornerplay ......... Corner font gnuolane-free ...... Gnuolane font gillsans ........... GillSans */ /* ENGLISH VERSION */ .english #header #main-nav ul li {float : right;margin-left : 30px;margin-top : 46px;} .english #projet article div h2 {float : left; display : block; width : 100%; margin : 0 0 48px 0; font-family : Gnuolane; font-size : 24px; text-align : center; text-transform : uppercase; line-height : 30px;} .english #projet .last {float : left; display : block; width : 100%; margin : 0 0 17px 0; font-family : Gnuolane; font-size : 24px; text-align : center; text-transform : uppercase; line-height : 30px;} /* STYLES */ body {font-family : GillSans;width : 100%;background : url('../img/main-background2.jpg') no-repeat center 116px #000000;background-size : 100%;} a {text-decoration : none; color : #3374b5;} a:hover {text-decoration : underline; color : #3374b5;} strong {font-weight : bold;} #ancre-associes {position : absolute; top : -115px;} #ancre-savoir-faire {position : absolute; top : -115px;} #ancre-projet {position : absolute; top : -115px;} #ancre-missions {position : absolute; top : -115px;} #ancre-contact {position : absolute; top : -115px;} .back-header {float : left;width : 100%;height : 116px;} .back-header .back-left {position : absolute; min-height : 116px; background : #ffffff; width : 50%; top : 0; left : 0;} .back-header .back-right {position : absolute; min-height : 116px; background : #313131; width : 50%; top : 0; right : 0;} .back-header .content-back {clear : both;position : relative;width : 1003px;left : 50%; top : 0; margin-left : -501px;} .back-header .content-back .back-left {clear : both;float : left;width : 336px;height : 116px;background : #ffffff;} .back-header .content-back .back-right {float : left;width : 667px;height : 116px;padding : 0;margin : 0;background : #313131;} #header {clear : both;float : left;width : 100%;height : 116px;} #header .back-left {position : absolute; min-height : 116px; background : #ffffff; width : 50%; top : 0; left : 0;} #header #lang {clear : both;position : absolute; top : 90px; margin-left : 180px;text-align : right;width : 150px;} #header #lang a {font-family : Gnuolane;font-size : 14px;text-decoration : underline;letter-spacing : 1px;text-align : right;} #header .back-right {position : absolute; min-height : 116px; background : #313131; width : 50%; top : 0; right : 0;} #header #main-nav {clear : both;position : absolute;width : 1003px;left : 50%; top : 0; margin-left : -501px;} #header #main-nav figure {clear : both;float : left;width : 336px;height : 116px;background : #ffffff;} #header #main-nav figure img {display : block;float : left;width : 162px;margin-left : 40px;margin-top : 27px;} #header #main-nav ul {float : right;width : 667px;height : 116px;padding : 0;margin : 0;background : #313131;} #header #main-nav ul li {float : right;margin-left : 20px;margin-top : 46px;} #header #main-nav ul li a {font-family : Gnuolane;font-size : 22px;color : #ffffff;text-decoration : none;letter-spacing : 1px;} #header #main-nav ul li a:hover, #main-nav ul li.selected a {color : #288fca;} #site-container {clear : both;position : absolute;width : 1003px;top : 116px;left : 50%;margin-left : -501px;} #slogan {clear : both;float : left;width : 100%;margin-top : 229px;} #slogan .cornerplay, #slogan .baseline {clear : both;float : right;padding : 10px 15px 10px 15px;background : url('../img/bg-slogan.png') repeat;} #slogan .cornerplay {font-family : Corner;font-size : 30px;margin-bottom : 13px;} #slogan .cornerplay .grey {color : #58585a;} #slogan .cornerplay .blue {color : #3374b5;} #slogan .baseline {font-family : Gnuolane;font-size : 40px;color : #3374b5;letter-spacing : 1px;} #slogan .text {font-family : "GillSans"; clear : both;float : right;margin-top : 25px;margin-right : 12px;text-align : right;color : #ffffff;font-style : italic;font-size : 20px;line-height : 30px;} .content-page {float : left;width : 100%;margin-bottom : 36px;background : silver;} .content-page#associes {height : 798px;} #associes {position : relative;} #associes .associes-bio {clear : both;float : left;height : 798px;width : 336px;background : #3374b5;} #associes .associes-bio h1 {clear : both;float : left;margin-left : 40px;margin-top : 75px;font-family : Gnuolane;color : #ffffff;font-size : 40px;letter-spacing : 1px;} #associes .associes-bio .baseline {clear : both;float : left;margin-left : 40px;margin-top : 55px;width : 200px;color : #ffffff;font-family : GillSans;font-style : italic;font-size : 24px;line-height : 30px;letter-spacing : 1px;} #associes .associes-bio .content {clear : both;float : left;margin-left : 40px;margin-top : 20px;width : 260px;color : #ffffff;font-family : GillSans;font-size : 16px;line-height : 22px;letter-spacing : 1px;} #associes .associes-fondateurs {float : left;width : 667px;height : 799px;} #associes .associes-fondateurs .associe {clear : both;float : left;width : 100%;height : 399px;} #associes .associes-fondateurs .associe.associe-stephanedor.photo {background : url('../img/photo-stephanedor.jpg') no-repeat;} #associes .associes-fondateurs .associe.associe-stephanedor.photo h1 {clear : both;float : left;margin-top : 145px;margin-left : 40px;font-family : Gnuolane;letter-spacing : 1px;font-size : 24px;color : #288fca;} #associes .associes-fondateurs .associe.associe-stephanedor.photo h2 {clear : both;float : left;margin-top : -5px;margin-left : 40px;font-family : Gnuolane;letter-spacing : 1px;font-size : 70px;color : #313131;} #associes .associes-fondateurs .associe.associe-stephanedor.photo .baseline {clear : both;float : left;margin-left : 40px;margin-top : 15px;color : #474747;font-size : 20px;font-style : italic;} #associes .associes-fondateurs .associe.associe-stephanedor.bio {background : #ffffff} #associes .associes-fondateurs .associe.associe-stephanedor.bio h1 {clear : both;float : left;margin-top : 20px;margin-bottom : 10px;margin-left : 24px;font-family : GillSans;font-style : italic;color : #3374b5;font-size : 24px;} #associes .associes-fondateurs .associe.associe-stephanedor.bio h2 {clear : both;float : left;margin-top : 5px;margin-bottom : 0px;margin-left : 24px;font-family : GillSans;font-style : italic;color : #3374b5;font-size : 14px; width : 90%;} #associes .associes-fondateurs .associe.associe-stephanedor.bio .baseline {clear : both;float : left;margin-top : 16px;margin-left : 24px;width : 92%;font-family : GillSans;font-style : italic;color : #58585a;font-size : 14px;} #associes .associes-fondateurs .associe.associe-stephanedor.bio .paragraphe {clear : both;float : left;margin-top : 16px;margin-left : 24px;width : 92%;font-family : GillSans;color : #58585a;font-size : 14px;line-height : 18px;} #associes .associes-fondateurs .associe.associe-stephanedor.bio .paragraphe .blue {color : #3374b5;font-style : italic} #associes .associes-fondateurs .associe.associe-jeanguillaumewelgryn.photo {background : url('../img/photo-jeanguillaumewelgryn.jpg') no-repeat;} #associes .associes-fondateurs .associe.associe-jeanguillaumewelgryn.photo h1 {clear : both;float : right;margin-top : 145px;margin-right : 40px;font-family : Gnuolane;letter-spacing : 1px;font-size : 24px;color : #288fca;} #associes .associes-fondateurs .associe.associe-jeanguillaumewelgryn.photo h2 {clear : both;float : right;margin-top : -2px;margin-right : 40px;font-family : Gnuolane;letter-spacing : 1px;font-size : 70px;color : #ffffff;} #associes .associes-fondateurs .associe.associe-jeanguillaumewelgryn.photo .baseline {clear : both;float : right;margin-right : 40px;margin-top : 15px;color : #fffefe;font-size : 20px;font-style : italic;} #associes .associes-fondateurs .associe.associe-jeanguillaumewelgryn.bio {background : #58585a} #associes .associes-fondateurs .associe.associe-jeanguillaumewelgryn.bio h1 {clear : both;float : left;margin-top : 25px;margin-bottom : 10px;margin-left : 24px;font-family : GillSans;font-style : italic;color : #ffffff;font-size : 24px;} #associes .associes-fondateurs .associe.associe-jeanguillaumewelgryn.bio h2 {clear : both;float : left;margin-top : 10px;margin-bottom : 0px;margin-left : 24px;font-family : GillSans;font-style : italic;color : #ffffff;font-size : 14px; width : 90%;} #associes .associes-fondateurs .associe.associe-jeanguillaumewelgryn.bio .baseline {clear : both;float : left;margin-top : 16px;margin-left : 24px;width : 92%;font-family : GillSans;font-style : italic;color : #313131;font-size : 14px;} #associes .associes-fondateurs .associe.associe-jeanguillaumewelgryn.bio .paragraphe {clear : both;float : left;margin-top : 16px;margin-left : 24px;width : 92%;font-family : GillSans;font-size : 14px;line-height : 18px; color : #313131;} #associes .associes-fondateurs .associe.associe-jeanguillaumewelgryn.bio .paragraphe .bold {font-style : italic; color : #ffffff;} .content-page#savoir-faire {margin-top : 5px;background-color : #000000;} #savoir-faire {position : relative;} #savoir-faire .savoir-faire {clear : both;float : left;height : 399px;width : 336px;background : black;position : relative; z-index : 5;} #savoir-faire .savoir-faire h1 {position : absolute;left : 40px;top : 70px;font-family : Gnuolane;color : #ffffff;font-size : 40px;letter-spacing : 1px;} #savoir-faire .savoir-faire .baseline {position : absolute;left : 40px;top : 155px;width : 260px;color : #ffffff;font-family : GillSans;font-size : 16px;line-height : 22px;letter-spacing : 1px;} #savoir-faire .savoir-faire-item h1 {font-family : Gnuolane;font-size : 40px;letter-spacing : 1px;} #savoir-faire .savoir-faire-item h2 {font-family : Gnuolane;font-size : 22px;line-height : 22px;letter-spacing : 1px;} #savoir-faire .savoir-faire-item p {margin-top : 35px;font-family : GillSans;font-size : 16px;line-height : auto;letter-spacing : 1px;} #savoir-faire .savoir-faire-item ul {margin-top : 25px;font-family : GillSans;font-size : 16px;line-height : auto;letter-spacing : 1px;} #savoir-faire .savoir-faire-item ul li {margin-top : 10px;font-family : GillSans;font-size : 16px;line-height : auto;letter-spacing : 1px;} #savoir-faire .savoir-faire-item.droit-audiovisuel {float : right;width : 667px;height : 399px;position : relative;z-index : 2; right : 0;} #savoir-faire .savoir-faire-item.droit-audiovisuel.illustration {background : url('../img/droits-audiovisuels.png') no-repeat;} #savoir-faire .savoir-faire-item.droit-audiovisuel h1 {position : absolute;left : 16px;top : 10px;color : #3374b5;} #savoir-faire .savoir-faire-item.droit-audiovisuel.content {background : #3374b5} #savoir-faire .savoir-faire-item.droit-audiovisuel.content h1 {color : #50505a;} #savoir-faire .savoir-faire-item.droit-audiovisuel.content .text {position : absolute; left : 15px;top : 90px;width : 560px;color : white;} #savoir-faire .savoir-faire-item.production {float : left;width : 670px;height : 353px;position : relative;z-index : 1;} #savoir-faire .savoir-faire-item.production.illustration {background : url('../img/production_new.jpg') no-repeat; background-position:center center; background-size:contain; background-color:#FBB100;} #savoir-faire .savoir-faire-item.production h1 {position : absolute;right : 16px;bottom : 10px;color : #ffffff;} #savoir-faire .savoir-faire-item.production.content {background : #ffffff} #savoir-faire .savoir-faire-item.production.content h1 {color : #3374b5;} #savoir-faire .savoir-faire-item.production.content .text {position : absolute;left : 38px;top : 96px;width : 608px;color : #50505a;text-align : right;} #savoir-faire .savoir-faire-item.international {float : left;width : 333px;height : 353px;position : relative;} #savoir-faire .savoir-faire-item.international.illustration {background : url('../img/international.jpg') no-repeat;} #savoir-faire .savoir-faire-item.international h1 {position : absolute;left : 116px;top : 19px;color : #50505a;} #savoir-faire .savoir-faire-item.international.content {background : #58585a} #savoir-faire .savoir-faire-item.international.content h1 {color : #3374b5;} #savoir-faire .savoir-faire-item.international.content .text {position : absolute;left : 29px;top : 110px;width : 290px;color : #ffffff;text-align : right;} #savoir-faire .savoir-faire-item.television {float : left;width : 335px;height : 396px;position : relative;} #savoir-faire .savoir-faire-item.television.illustration {background : url('../img/television.jpg') no-repeat;} #savoir-faire .savoir-faire-item.television h1 {position : absolute;left : 18px;top : 14px;color : #50505a;} #savoir-faire .savoir-faire-item.television.content {background : #58585a} #savoir-faire .savoir-faire-item.television.content h1 {color : #3374b5;} #savoir-faire .savoir-faire-item.television.content .text {position : absolute;left : 18px;top : 106px;width : 293px;color : #ffffff;text-align : left;} #savoir-faire .savoir-faire-item.competition {float : left;width : 335px;height : 396px;position : relative;} #savoir-faire .savoir-faire-item.competition.illustration {background : url('../img/competitions_new.jpg') no-repeat;} #savoir-faire .savoir-faire-item.competition h1 {position : absolute;left : 16px;top : 343px;color : #ffffff;} #savoir-faire .savoir-faire-item.competition.content {background : #ffffff} #savoir-faire .savoir-faire-item.competition.content h1 {color : #3374b5;} #savoir-faire .savoir-faire-item.competition.content .text {position : absolute;left : 23px;top : 21px;width : 280px;color : #50505a;text-align : left;} #savoir-faire .savoir-faire-item.developpement {float : left;width : 331px;height : 396px;position : relative;} #savoir-faire .savoir-faire-item.developpement.illustration {background : url('../img/developpement.jpg') no-repeat;} #savoir-faire .savoir-faire-item.developpement h1 {position : absolute;left : 95px;top : 14px;color : #3374b5;} #savoir-faire .savoir-faire-item.developpement.content {background : #3374b5} #savoir-faire .savoir-faire-item.developpement.content h1 {color : #50505a;} #savoir-faire .savoir-faire-item.developpement.content .text {position : absolute;left : 26px;top : 102px;width : 290px;color : #ffffff;text-align : right;} #savoir-faire .savoir-faire-item.branding {float : left;width : 670px;height : 427px;position : relative;} #savoir-faire .savoir-faire-item.branding.illustration {background : url('../img/branding.jpg') no-repeat;} #savoir-faire .savoir-faire-item.branding h1 {position : absolute;left : 26px;top : 374px;color : #3374b5;} #savoir-faire .savoir-faire-item.branding.content {background : #3374b5} #savoir-faire .savoir-faire-item.branding.content h1 {color : #50505a;} #savoir-faire .savoir-faire-item.branding.content .text {position : absolute;left : 48px;top : 86px;width : 600px;color : #ffffff;text-align : right;} #savoir-faire .savoir-faire-item.institution {float : left;width : 331px;height : 427px;position : relative;} #savoir-faire .savoir-faire-item.institution.illustration {background : url('../img/institution.jpg') no-repeat;} #savoir-faire .savoir-faire-item.institution h1 {position : absolute;left : 19px;top : 268px;color : #50505a;} #savoir-faire .savoir-faire-item.institution.content {background : #50505a} #savoir-faire .savoir-faire-item.institution.content h1 {color : #3374b5;} #savoir-faire .savoir-faire-item.institution.content .text {position : absolute;left : 15px;top : 19px;width : 303px;color : #ffffff;text-align : left;} .content-page#projet {margin-top : 236px;} #projet {background : url('../img/back_projet.jpg') no-repeat 111%; background-color : #000000; color : #ffffff; position : relative;} #projet article {padding : 83px 38px 34px 38px;} #projet article h1 {float : left; display : block; width : 100%; text-align : center; font-family : Gnuolane; font-size : 42px;} #projet article div {float : left; width : 28%; margin : 72px 2.6% 0 2.6%;} #projet article div h2 {float : left; display : block; width : 100%; margin : 0 0 48px 0; font-family : Gnuolane; font-size : 24px; text-align : center; text-transform : uppercase; line-height : 30px;} #projet article div ul {float : left; width : 100%;} #projet article div ul li {margin : 0 0 32px 15%; width : 83%; list-style-image : url('../img/checkmark.png'); display : list-item; text-align : left;} #missions article .grid { display : flex; flex-wrap : wrap; width : 100%; position : relative;} #missions article .grid .item { width : calc(100% / 4);height : 17rem;border-right : 2px solid #515151;border-top : 2px solid #515151;box-sizing : border-box;border-bottom : 2px solid #515151; transition : all 0.3s;} #missions article .grid .item:nth-of-type(n+5) {border-top : 0;} #missions article .grid .item figure { width : 100%;height : 100%;display : flex;flex-wrap : wrap;align-items : center;justify-content : center; flex-direction : column; transition : 0.3s; cursor : pointer;} #missions article .grid .item.opacity figure { opacity : 0.5; } #missions article .grid .item img { width : auto; max-height : 50%;} #missions article .grid .back { width : 90%; display : none;flex-wrap : wrap; margin : 2rem auto;} #missions {background : #ffffff; color : #333333; position : relative;} #missions article {float : left; /*width : 927px; padding : 83px 38px 34px 38px;*/ width : 100%;} #missions article .head {float : left; display : block; width : 50%; margin : 40px 25% 40px;} #missions article .head h1 {background : url('../img/separate_title.jpg') center repeat-x; text-align : center; font-family : Gnuolane; font-size : 42px;} #missions article .head h1 span {background : white; padding : 0 15px;} #missions article .intro {width : 86%; margin : 0 7% 30px; font-size : 18px; line-height : 24px; text-align : center;} #missions .mission-container {float : left; width : 100%; height : inherit; margin : 25px 0; /*background:url('../img/vertical_separate.jpg') center repeat-y;*/} #missions article .one-mission {float : left;width : 100%; margin-bottom : 50px;} #missions article .one-mission figure {float : left; width : 20%; text-align : center;} #missions article .one-mission figure img { width : 90%;max-width : 125px;} #missions article .grid .back h2 {float : right; display : block; width : 75%; text-align : left; color : #288fca; font-family : Gnuolane; font-size : 24px; line-height : 30px; margin : 0 0 18px 5%;} #missions article .grid .back p {float : right; display : block; width : 75%; text-align : left; line-height : 22px; margin : 0 0 1rem 5%;} #missions article .grid .back hr { width : 20%;margin : 1rem auto 1rem auto; clear : both;} #missions article .grid .back p strong {color : #3374b5;} #missions article .grid .back p a {text-decoration : underline;} #missions article .grid .back ul { display : flex; float : right; align-items : center; justify-content : center; margin : 10px 0; width : 75%; flex-wrap : wrap;} #missions article .grid .back ul li {margin : 0 20px;} #missions article .grid .back ul li img { max-width : 80px; max-height : 80px;} #missions article .vertical-separate {float : left; min-width : 8%; min-height : 100%;} #contact {background : #3374b5; position : relative;} #contact aside {float : left; width : 336px; background : #3374b5; color : #ffffff; text-align : center; min-height : 100%;} #contact aside .center {width : 46%; margin : 25px 27%;} #contact aside .center figure {width : 100%; text-align : center;} #contact aside .center figure img {width : 90%} #contact aside .center .location {margin-top : 195px;} #contact aside .center .location p {font-family : Gnuolane; font-size : 22px; margin : 15px 0 0 0;} #contact article {float : left; width : 667px; background : #ffffff;} #contact article h1 {display : block; width : 100%; float : left; text-align : center; font-family : Gnuolane; font-size : 42px; margin : 45px 0 25px 0; color : #58585a;} #contact article form {float : left; width : 634px; margin : 0 0 0 33px; padding : 0 0 60px 0;} #contact article form input {margin : 30px 25px 0 0; width : 260px; padding : 15px 10px; background : #3374b5; border : none; color : white; font-size : 14px; font-family : GillSans;} #contact article form span {float : left; display : block; margin : 30px 25px 0 0; width : 145px; padding : 15px 10px 17px; background : #a1bfdd; border : none; color : #58585a; font-size : 14px; font-family : GillSans;text-align : center;} #contact article form input#txtInput {margin : 30px 0 0 22px; width : 145px; float : left;} #contact textarea {overflow : auto;} #contact article form input.submit {background : #58585a; width : 165px; padding : 15px 10px; float : left; margin-left : 47px; cursor : pointer;} #contact article textarea {background : #3374b5; border : none; color : white; font-size : 14px; font-family : GillSans; resize : none; padding : 15px 10px; margin : 30px 0 0 0; width : 570px; height : 220px;} #main-footer {clear : both;float : left;width : 100%;background : #3374b5;} #main-footer aside {float : left; width : 286px; padding : 40px 25px; background : #ffffff; color : #58585a; text-align : left; min-height : 100%; font-family : GillSans; font-size : 16px; line-height : 20px;} #main-footer article {color : #ffffff; float : left; width : 642px; margin : 40px 0 0 25px;} #main-footer article p a {color : #ffffff; text-decoration : underline;} /* IE-7 */ .ie7 #contact aside .center figure img {width : auto;} .ie7 #contact aside .center .location figure img {width : auto;} .ie7 #contact article form input.submit {padding : 14px 10px;} .ie7 #missions article .one-mission figure img { width : auto;} .ie7 #missions .mission-container {min-height : 190px;} .ie7 #header #lang {clear : both;position : absolute; top : 90px; margin-left : -120px;text-align : right;width : 110px;} /* MEDIA QUERIES */ @media screen and (min-width : 0px) and (max-width : 1003px) { #header #main-nav ul {padding-right : 20px;width : 647px;} }