/* * www.KNACSS.com V2.7 (2013-08) @author: Raphael Goetter, Alsacreations * Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/ */ /* ----------------------------- */ /* ==reset */ /* ----------------------------- */ /* base font-size corresponds to 10px and is adapted to rem unit */ html {font-size: 95%;} body {background-color: #fff; color: #000; font-family: helvetica, arial, sans-serif; line-height: 1.5; }} /* font-sizing for content */ /* preserves vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */ p,ul,ol,dl,blockquote,pre,td,th,label,textarea,caption,details,figure {font-size: 1em; /* equiv 14px */line-height: 1.5;margin: .75em 0 0;} h1,.h1-like {font-size: 2em; /* equiv 32px */line-height: 1.6154em;margin: .8077em 0 0 0;} h2,.h2-like {font-size: 2em; /* equiv 28px */line-height: 1.75em;margin: .875em 0 0 0;} h3,.h3-like {font-size: 1.25em; /* equiv 24px */line-height: 1.909em;margin: .9545em 0 0 0;} h4,.h4-like {font-size: 1.4286em; /* equiv 20px */line-height: 1.05em;margin: 1.05em 0 0 0;} h5,.h5-like {font-size: 1.2857em; /* equiv 18px */line-height: 1.1667em;margin: 1.1667em 0 0 0;} h6,.h6-like {font-size: 1.1429em; /* equiv 16px */line-height: 1.3125em;margin: 1.3125em 0 0 0;} /* alternate font-sizing */ .smaller {font-size: .7143em; /* equiv 10px */} .small {font-size: .8571em; /* equiv 12px */} .big {font-size: 1.1429em; /* equiv 16px */} .bigger {font-size: 1.2857em; /* equiv 18px */} .biggest {font-size: 1.4286em; /* equiv 20px */} /* soft reset */ html,body,textarea,figure,label {margin: 0;padding: 0;} ul,ol {padding-left: 2em;} ul.unstyled {list-style: none;} code, pre,samp,kbd {white-space: pre-wrap;font-family: consolas, 'DejaVu Sans Mono', courier, monospace;line-height: 1em;} code, kbd, mark {border-radius: 2px;} em {font-style: italic;} strong {font-weight: bold;} i,b {font-style: normal;font-weight: normal;} kbd {padding: 0 2px;border: 1px solid #999;} code {padding: 2px 4px;background: rgba(0,0,0,.04);color: #b11; } mark {padding:2px 4px;background: #ff0;} sup,sub {vertical-align: 0;position: relative;} sup {bottom: 1ex;} sub {top: .5ex;} table { margin-bottom: 1.5em; } /* avoid top margins on first content element */ p:first-child,ul:first-child,ol:first-child,dl:first-child,blockquote:first-child,pre:first-child,h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child {margin-top: 0;} /* avoid margins on nested elements */ li p,li ul,li ol {margin-top: 0;margin-bottom: 0;} /* max values */ img, table, td, blockquote, code, pre, textarea, input, video {max-width: 100%;} /* pictures */ img {height: auto;vertical-align: middle;} /* Gmap3 max-width bug fix on images */ .gmnoscreen img,.gmnoprint img {max-width: none !important;} a img { border: 0; } /* scripts */ body > script {display: none !important;} /* skip-links */ .skip-links {position: absolute;} .skip-links a {position: absolute;left: -7000px;padding: 0.5em;background: #000;color:#fff;text-decoration: none;} .skip-links a:focus {position: static} /* ----------------------------- */ /* ==layout and modules */ /* ----------------------------- */ /* switching box model for all elements */ * {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} /* float layout */ /* module, gains superpower "BFC" Block Formating Context */ .mod { overflow: hidden;} /* blocks that needs to be placed under floats */ .clear,.line,.row {clear: both;} /* blocks that must contain floats */ .clearfix:after,.line:after,.mod:after {content: "";display: table;clear: both;} /* table layout */ .row {display: table;table-layout: fixed;width: 100%;} .row > *,.col {display: table-cell;vertical-align: top;} /* inline-block */ .inbl {display: inline-block;} /* alignments (blocks and inline) */ /* ------------------------------ */ /* left elements */ .left {float: left;} img.left {margin-right: 1em;} /* right elements */ .right {float: right;} img.right {margin-left: 1em;} img.left, img.right {margin-bottom: 5px;} .center { margin-left: auto; margin-right: auto; } .txtleft { text-align: left; } .txtright { text-align: right; } .txtcenter { text-align: center; } /* blocks widths (percentages and pixels) */ .w10 { width: 10%; } .w20 { width: 20%; } .w25 { width: 25%; } .w30 { width: 30%; } .w33 { width: 33.3333%; } .w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; } .w66 { width: 66.6666%; } .w70 { width: 70%; } .w75 { width: 75%; } .w80 { width: 80%; } .w90 { width: 90%; } .w100 { width: 100%; } .w50p { width: 50px; } .w100p { width: 100px; } .w150p { width: 150px; } .w200p { width: 200px; } .w300p { width: 300px; } .w400p { width: 400px; } .w500p { width: 500px; } .w600p { width: 600px; } .w700p { width: 700px; } .w800p { width: 800px; } .w960p { width: 960px; } .mw960p { max-width: 960px; } .w1140p { width: 1140px; } .mw1140p { max-width: 1140px; } /* spacing helpers p,m = padding,margin a,t,r,b,l = all,top,right,bottom,left s,m,l,n,0 = small(10px),medium(20px),large(30px), zero or none(0) source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css */ .m-reset, .ma0 { margin: 0; } .p-reset, .pa0 { padding: 0; } .ma1, .mas { margin: 10px; } .ma2, .mam { margin: 20px; } .ma3, .mal { margin: 30px; } .pa1, .pas { padding: 10px; } .pa2, .pam { padding: 20px; } .pa3, .pal { padding: 30px; } .mt0, .mtn { margin-top: 0; } .mt1, .mts { margin-top: 10px; } .mt2, .mtm { margin-top: 20px; } .mt3, .mtl { margin-top: 30px; } .mr0, .mrn { margin-right: 0; } .mr1, .mrs { margin-right: 10px; } .mr2, .mrm { margin-right: 20px; } .mr3, .mrl { margin-right: 30px; } .mb0, .mbn { margin-bottom: 0; } .mb1, .mbs { margin-bottom: 10px; } .mb2, .mbm { margin-bottom: 20px; } .mb3, .mbl { margin-bottom: 30px; } .ml0, .mln { margin-left: 0; } .ml1, .mls { margin-left: 10px; } .ml2, .mlm { margin-left: 20px; } .ml3, .mll { margin-left: 30px; } .pt0, .ptn { padding-top: 0; } .pt1, .pts { padding-top: 10px; } .pt2, .ptm { padding-top: 20px; } .pt3, .ptl { padding-top: 30px; } .pr0, .prn { padding-right: 0; } .pr1, .prs { padding-right: 10px; } .pr2, .prm { padding-right: 20px; } .pr3, .prl { padding-right: 30px; } .pb0, .pbn { padding-bottom: 0; } .pb1, .pbs { padding-bottom: 10px; } .pb2, .pbm { padding-bottom: 20px; } .pb3, .pbl { padding-bottom: 30px; } .pl0, .pln { padding-left: 0; } .pl1, .pls { padding-left: 10px; } .pl2, .plm { padding-left: 20px; } .pl3, .pll { padding-left: 30px; } /* hiding content */ .visually-hidden {position: absolute;left: -7000px;overflow: hidden;} [dir=rtl] .visually-hidden {left: auto;right: -7000px;} .desktop-hidden { display: none; } /* hidden on desktop */ /* ----------------------------- */ /* ==forms */ /* ----------------------------- */ form,fieldset {border: none;} input,button,select,label,.btn {vertical-align: middle; /* @bugfix alignment */font-family: inherit;font-size: inherit;} textarea {resize: vertical;font-family: inherit;font-size: inherit;} /* ----------------------------- */ /* ==iefix */ /* ----------------------------- */ /* hasLayout for IE6/IE7 */ .ie67 .clearfix,.ie67 .line,.ie67 .mod,.ie67 .row,.ie67 .col {zoom: 1;} /* inline-block and table-cell for IE6/IE7 */ /* warning: .col needs a width on IE6/IE7 */ .ie67 .btn,.ie67 .col,.ie67 .inbl {display: inline;zoom: 1;} .ie8 img {width: auto; /* @bugfix for IE8 */} /* Active box-sizing for IE6/IE7 */ /* @source https://github.com/Schepp/box-sizing-polyfill */ /* .ie67 * {behavior: url(/js/boxsizing.htc); } */ /* ----------------------------- */ /* ==print */ /* ----------------------------- */ /* quick print reset */ @media print { p,blockquote {orphans: 2;widows: 2;} blockquote,ul,ol {page-break-inside: avoid;} h1,h2,h3,caption {page-break-after: avoid;}} /* orientation iOS font-size fix */ @media (orientation: landscape) and (max-device-width: 768px) { html,body {-webkit-text-size-adjust: 100%;}} /* ----------------------------- */ /* ==own stylesheet */ /* ----------------------------- */ /* Here should go your own CSS styles */ /* You can link them with an @import or, better for webperf, just paste them here */ /* @import url(styles.css); */ /* ----------------------------- */ /* ==grids */ /* ----------------------------- */ /* grids inspired from SUIT https://github.com/suitcss/suit */ .grid {overflow-x: hidden;} .grid > * {display: block;padding: 0;margin: 0 -10px; /* half gutter value */text-align: left;letter-spacing: -0.31em;text-rendering: optimizespeed;} /* Opera hack */ .opera:-o-prefocus,.grid > * {word-spacing: -0.43em;} .grid > * > * {width: 100%;display: inline-block;padding: 0 10px; /* half gutter value */vertical-align: top;text-align: left;letter-spacing: normal;word-spacing: normal;text-rendering: auto;*display: inline; *zoom: 1; /* IE67 hack */} .grid2 > * {width: 50%;} .grid3 > * {width: 33.333%;} .grid4 > * {width: 25%;} .grid5 > * {width: 20%;} .grid6 > * {width: 16.667%;} .grid8 > * {width: 12.5%;} .grid10 > * {width: 10%;} .grid12 > * {width: 8.333%;} /* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */ .grid2-1 > *:first-child,.grid1-2 > * + * { width: 66.666%; } .grid1-2 > *:first-child,.grid2-1 > * + * { width: 33.333%; } .grid1-3 > *:first-child,.grid3-1 > * + * { width: 25%; } .grid3-1 > *:first-child,.grid1-3 > * + * { width: 75%; } /* Responsiv-o-matic */ @media (max-width: 1024px) {.grid5 > *,.grid6 > *,.grid8 > *,.grid10 > *,.grid12 > * {width: 33.333%}} @media (max-width: 768px) {.grid3 > *,.grid4 > *,.grid5 > *,.grid6 > *,.grid8 > *,.grid10 > *,.grid12 > * {width: 50%}} @media (max-width: 640px) {.grid > * > * {width: 100%}} /* ----------------------------- */ /* ==tables */ /* ----------------------------- */ table,.table {max-width : 100%;table-layout: fixed;border-collapse: collapse;vertical-align: top;} table {width: 100%} .table {display: table;} table#recaptcha_table,table.table-auto {table-layout:auto;} caption {padding: 10px;color: #555;font-style: italic;} table {border: 1px solid #ccc;} tr > * + * {border-left: 1px solid #ccc;} th,td {padding: .3em .8em;text-align: left;border-bottom: 1px solid #ccc;} td {color: #333;} /* alternate tables */ .alternate { border: 0; } .alternate tbody { border: 1px solid #ccc; } .alternate thead tr > * + * {border-left: 0;} .alternate tbody tr > * + * {border-left: 1px solid #ccc;} /* alternate-vert tables */ .alternate-vert { border: 0;border-right: 1px solid #ccc;} .alternate-vert tr > :first-child {border-bottom: 0;} .alternate-vert tr > * + * {border-top: 1px solid #ccc;} /* striped tables */ .striped tbody tr:nth-child(odd) {background: #eee;background: rgba(0, 0, 0, .05);} /* striped-vert tables */ .striped-vert tr > :first-child {background: #eee;background: rgba(0, 0, 0, .05);} /* ----------------------------- */ /* ==forms */ /* ----------------------------- */ /* thanks to HTML5boilerplate, * github.com/nathansmith/formalize * and www.sitepen.com */ /* buttons */ .btn { display: inline-block; } .btn.alternate {} .btn.highlight {} .login {} .logout {} .primary {} .warning {} .error {} .success {} /* forms items */ label {display: inline-block;vertical-align: middle;cursor: pointer;} legend {border: 0;white-space: normal;} button, input, select {margin: 0;} textarea {overflow: auto; /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */min-height: 5em;vertical-align: top;} button, input[type="button"], input[type="reset"], input[type="submit"] {cursor: pointer;-webkit-appearance: button; /* clickable input types in iOS */ *overflow: visible; /* Corrects inner spacing displayed oddly in IE7 */} input[type="checkbox"], input[type="radio"] {padding: 0; /* Corrects excess space around these inputs in IE8/9 */ *width: 13px; *height: 13px; /* Corrects excess space around these inputs in IE7 */} input[type="search"] { -webkit-appearance: textfield; } /* if select styling bugs on WebKit */ /* select { -webkit-appearance: none; } */ /* 'x' appears on right of search input when text is entered. This removes it */ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {display: none;} ::-webkit-input-placeholder { color: #777; } input:-moz-placeholder, textarea:-moz-placeholder { color: #777; } /* Removes inner padding and border in FF3+ */ button::-moz-focus-inner, input[type='button']::-moz-focus-inner, input[type='reset']::-moz-focus-inner, input[type='submit']::-moz-focus-inner {border: 0;padding: 0;} /* ----------------------------- */ /* ==icons and bullets */ /* ----------------------------- */ .icon {display: inline-block;} .icon:before,.icon.after:after {content: "";display: inline-block;vertical-align: middle;position: relative; top: -.1em;margin: 0 0.3em 0 0;font: 1.4em/1 sans-serif;color: #000;text-shadow: 1px 1px 0 rgba(0,0,0,.1);speak: none;} @media (min-device-width: 768px) {.icon:before,.icon.after:after {font: 1em/0.6 sans-serif;-webkit-transform: rotateZ(0.05deg);}} .icon.after:after {margin: 0 0 0 8px;} .icon.after:before {content: "" !important} .icon-rate:before,.icon-rate.after:after {content: "\2605";} .icon-unrate:before,.icon-unrate.after:after{content: "\2606";} .icon-check:before,.icon-check.after:after{content: "\2713";} .icon-uncheck:before,.icon-uncheck.after:after{content: "\2717";} .icon-cloud:before,.icon-cloud.after:after {content: "\2601";} .icon-dl:before,.icon-dl.after:after {content: "\21E3";font-weight: bold;} .icon-cross:before,.icon-cross.after:after {content: "\2716";font-weight: bold;} .icon-arrow1:before,.icon-arrow1.after:after {content: "\2192";position: relative; top: -0.15em;} .icon-arrow2:before,.icon-arrow2.after:after {content: "\279E";} .icon-arrow3:before,.icon-arrow3.after:after {content: "\279A";} .icon-bracket1:before,.icon-bracket1.after:after {content: "\2039";font-weight: bold;font-size: 1.6em;position: relative; top: -0.15em;} .icon-bracket2:before,.icon-bracket2.after:after {content: "\203A";font-weight: bold;font-size: 1.6em;position: relative; top: -0.15em;} .icon-up:before,.icon-up.after:after {content: "\25B2";} .icon-down:before,.icon-down.after:after {content: "\25BC";} .icon-bull:before,.icon-bull.after:after {content: "\2022";font-size: 1.2em;top: -0.05em;} .icon-bull2:before,.icon-bull2.after:after {content: "\25E6";top: -0.05em;} .icon-bull3:before,.icon-bull3.after:after{content: "\2023";font-size: 1.6em;top: -0.05em;} .icon-nav:before,.icon-nav.after:after {content: "\2261";font-weight: bold;} .icon-losange:before,.icon-losange.after:after {content: "\25C6";} .icon-asteri:before,.icon-asteri.after:after {content: "\2731";font-weight: bold;} .icon-mail:before,.icon-mail.after:after {content: "\2709";font-size: 1.6em;top: -.05em;} /* ----------------------------- */ /* ==flexbox classes */ /* ----------------------------- */ /* flexbox layout context on container */ .flex {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;} /* horizontal alignment */ .flex-h {-webkit-box-orient: horizontal;-moz-box-orient: horizontal;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;} /* vertical alignment */ .flex-v {-webkit-box-orient: vertical;-moz-box-orient: vertical;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;} /* for fluid items */ .flex-fluid {-moz-box-flex: 1;-webkit-flex: 1;-moz-flex: 1;-ms-flex: 1;flex: 1;} /* for items that must appear first */ .flex-start {-webkit-box-ordinal-group: -1;-moz-box-ordinal-group: 0;-ms-flex-order: -1;-webkit-order: -1;-moz-order: -1;order: -1;} /* for items that must appear middle */ .flex-mid {-webkit-box-ordinal-group: 1;-moz-box-ordinal-group: 1;-ms-flex-order: 1;-webkit-order: 1;-moz-order: 1;order: 1;} /* for items that must appear at the end */ .flex-end {-webkit-box-ordinal-group: 42;-moz-box-ordinal-group: 42;-ms-flex-order: 42;-webkit-order: 42;-moz-order: 42;order: 42;} /* ----------------------------- */ /* ==viewport fixing for RWD */ /* ----------------------------- */ @-webkit-viewport {width: device-width;zoom: 1.0;} @-moz-viewport {width: device-width;zoom: 1.0;} @-ms-viewport {width: device-width;zoom: 1.0;} @-o-viewport {width: device-width;zoom: 1.0;} @viewport {width: device-width;zoom: 1.0;} /* ----------------------------- */ /* ==desktop and retina medias */ /* ----------------------------- */ /* here go rules for big resources and big screens like: background-images, font-faces, etc. */ @media (min-width: 641px) {} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {/* Style adjustments for retina devices */} /* ---------------------------------- */ /* ==Responsive large / small / tiny */ /* ---------------------------------- */ /* layouts for large (l) screens */ @media (min-width: 1280px) { .large-hidden, .tablet-hidden { display: none !important; } .large-visible { display: block !important; } .large-no-float {float: none; } .large-inbl {display: inline-block;float: none;vertical-align: top;} .large-row {display: table;table-layout: fixed;width: 100% !important;} .large-col {display: table-cell;vertical-align: top;} /* widths for large (l) screens */ .large-w25 { width: 25% !important; } .large-w33 { width: 33.3333% !important; } .large-w50 { width: 50% !important; } .large-w66 { width: 66.6666% !important; } .large-w75 { width: 75% !important; } .large-w100 {display: block !important;float: none !important;clear: none !important;width: auto !important;margin-left: 0 !important;margin-right: 0 !important;border: 0; } /* margins for large (l) screens */ .large-ma0 { margin: 0 !important; }} @media (max-width: 768px) { /* quick tablet reset */ .w600p,.w700p,.w800p,.w960p,.mw960p,.small-wauto { width: auto;float: none;} /* you shall not pass */ div, textarea, table, td, th, code, pre, samp {word-wrap: break-word;-webkit-hyphens: auto;-moz-hyphens: auto;-ms-hyphens: auto;-o-hyphens: auto;hyphens: auto;} /* layouts for small (s) screens */ .small-hidden,.tablet-hidden { display: none !important; } .small-visible { display: block !important; } .small-no-float {float: none; } .small-inbl {display: inline-block;float: none;vertical-align: top;} .small-row {display: table !important;table-layout: fixed !important;width: 100% !important;} .small-col {display: table-cell !important;vertical-align: top !important;} /* widths for small (s) screens */ .small-w25 { width: 25% !important; } .small-w33 { width: 33.3333% !important; } .small-w50 { width: 50% !important; } .small-w66 { width: 66.6666% !important; } .small-w75 { width: 75% !important; } .small-w100 {display: block !important;float: none !important;clear: none !important;width: auto !important;margin-left: 0 !important;margin-right: 0 !important;border: 0; } /* margins for small (s) screens */ .small-ma0 { margin: 0 !important; }} @media (max-width: 640px) { /* quick smartphone reset */ .mod,.col,fieldset {display: block !important;float: none !important;clear: none !important;width: auto !important;margin-left: 0 !important;margin-right: 0 !important;border: 0;} .w300p,.w400p,.w500p {width: auto;float: none;} .row { display: block !important;width: 100% !important;} /* layouts for tiny (t) screens */ .tiny-hidden, .phone-hidden { display: none !important; } .tiny-visible { display: block !important; } .tiny-no-float {float: none;} .tiny-inbl {display: inline-block;float: none;vertical-align: top;} .tiny-row {display: table !important;table-layout: fixed !important;width: 100% !important;} .tiny-col {display: table-cell !important;vertical-align: top !important;} th,td {display: block !important;width: auto !important;text-align: left !important;} thead { display: none; } /* widths for tiny (t) screens */ .tiny-w25 { width: 25% !important; } .tiny-w33 { width: 33.3333% !important; } .tiny-w50 { width: 50% !important; } .tiny-w66 { width: 66.6666% !important; } .tiny-w75 { width: 75% !important; } .tiny-w100 { display: block !important;float: none !important;clear: none !important;width: auto !important;margin-left: 0 !important;margin-right: 0 !important;border: 0;} /* margins for tiny (t) screens */ .tiny-ma0 { margin: 0 !important; }} /*____________________________________________________GENERAL_______________________________________________*/ html {background-color:#35322d;} body {background-color: rgba(0, 0, 0, 0); text-align: left; overflow-x: hidden; font-family: 'Open Sans', sans-serif; font-size: 1em; color: #fff;} .contenu {max-width: 800px; padding: 0; margin: auto;} ol, ul {list-style: none;} a, div, figure, h1, h2, h3 , h4, h5{outline:none !important; border:none !important;} h1 {font-weight:normal; color: #fff; text-align: left; font-size: 1.8em; margin: 30px 20px 0px 20px;} h2 {font-weight:normal; color:#0ecbfa; text-align: left; margin: 5px 20px 10px 20px; font-size: 1.3em;} h3 {text-align: left; color: #fff; margin: 5px 30px; font-size: 1.2em; line-height: 120%;} h4 {font-weight:normal; color:#0ecbfa; padding: 0; margin: 15px 0 5px 0; font-size: 1em; line-height: 120%;} h5 {text-align: left; color: #fff; padding: 0; margin: 15px 0 5px 0; font-size: 1em; line-height: 120%;} #backgroundContainer div {width:100%;height:100%;position:fixed;top:0;left:0;z-index: -1;background: no-repeat center fixed;margin:0;padding:0; -webkit-background-size: cover;background-size: cover;} .log {margin-top:20px;} .pointer {cursor:pointer;} .gras {font-weight: bold;} .ital, i {font-style: italic;} .popup560 {width:560px; margin:0 auto; text-align: center; font-size: .85em; font-weight: bold; border-style: solid; border-width: 1px; border-color: grey; padding:10px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; } .bg {width: 100%;padding: 0;margin: auto; background-color: rgba(0, 0, 0, .2); } .overflow-y {overflow-y: visible !important;} figure {display: inline-block;line-height:16px !important;} /*régule la hauteur de ligne des légendes vignettes*/ .mp3 {text-align:left;} /*--------- VIDEO ----------*/ .legende-video {font-size:.95em; padding:0 0 20px 0; word-break:normal;} #player {} #playlist {padding:20px 0 20px 50px; margin-top:-6px;} .playlist-vignette {border-style:solid; border-width:1px;margin:5px 5px 5px 0px; float:left;} .playlist-vignette:hover {} .playlist-caption {font-size:12px; margin-left:5px} /*--------- DIAPORAMA BJQS ----------*/ .diaporama { width: 100%; margin: auto; text-align: left; } .bgNoir { background-color: rgba(0, 0, 0, 1); } /*--------- DIAPORAMA BJQS ----------*/ .blocImage {max-width: 640px; margin: auto; padding: 0; left: -10px;} ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;} li.bjqs-slide{position:absolute; display:none;} ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;} ul.bjqs-controls.v-centered li a{position:absolute;padding:5px;} ul.bjqs-controls.v-centered li.bjqs-next a{ right:-50px; font-size:20px;/*right:-90px;color:#fff;background-color:rgba(0, 0, 0, .5)*/} @media screen and (max-width:740px){ul.bjqs-controls.v-centered li.bjqs-next a {right:-10px}} ul.bjqs-controls.v-centered li.bjqs-next a:hover{color:rgba(0, 0, 0, 0);/*left:-60px; background-color:rgba(0, 0, 0, 0)*/} ul.bjqs-controls.v-centered li.bjqs-prev a{left:-60px;font-size:20px;color:#fff;/*background-color:rgba(0, 0, 0, .5)*/} @media screen and (max-width:740px){ul.bjqs-controls.v-centered li.bjqs-prev a {left:-20px}} ul.bjqs-controls.v-centered li.bjqs-prev a:hover{color:rgba(0, 0, 0, 0);/*background-color:rgba(0, 0, 0, 0)*/} ol.bjqs-markers{list-style: none; padding: 0; margin: 0; width:100%;} ol.bjqs-markers.h-centered{text-align: center;} ol.bjqs-markers li{display:inline;} ol.bjqs-markers li a{display:inline-block;} p.bjqs-caption{display:block;width:100%;margin:0;padding:5px;position:absolute;bottom:0;font-size:12px;color:#fff;background-color:rgba(0, 0, 0, .8)} .bgNoir{background-color:rgba(0, 0, 0, 1)} .smartOnly {display:none} .deskOnly {display:block} .centre {text-align: center; margin-left: auto; margin-right: auto;} .resp {display: inline-block; position:relative; max-width:720px; padding:0; margin:0 auto; } @media all and (max-width:680px){.resp{width:100%; height:auto;}} /*____________________________________________________RACCOURCIS_______________________________________________*/ .itemsmenu {text-decoration: none !important;} .fontlogo {font-size: 1.5em;} .inbl {display: inline-block;} .val-t {vertical-align: top;} .val-m {vertical-align:middle} .tac {text-align:center} .tal {text-align:left} .tar {text-align:right} .taj {text-align:justify;} .float-right{float:right} .float-left {float:left} .float-none {float:none} .fix {position:fixed} .abs {position:absolute} .rel {position:relative} .list-0 {list-style-type: none} .top0 {top:0} .mauto {margin: auto;} .m10 {margin: 10px;} .m20 {margin: 20px;} .m15 {margin: 15px;} .mt-20 {margin-top:-20px} .mt-15 {margin-top:-15px} .mt-10 {margin-top:-10px} .mt5 {margin-top:5px} .mt10 {margin-top:10px} .mt15 {margin-top:15px} .mt17 {margin-top:17px} .mt20 {margin-top:20px} .mt25 {margin-top:25px} .mt30 {margin-top:30px} .mt33 {margin-top:33px} .mt40 {margin-top:40px} .mt60 {margin-top:60px} .mt80 {margin-top:80px} .mt100 {margin-top:100px} .mt-10 {margin-top:-10px} .mt-30 {margin-top:-30px} .mr-15 {margin-right:-15px} .mr0 {margin-right:0px} .mr5 {padding-left:5px} .mr10 {margin-right:10px} .mr15 {margin-right:15px} .mr20 {margin-right:20px} .mr50 {margin-right:50px} .mr70 {margin-right:70px} .mr400 {margin-right:400px} .ml5 {margin-left:5px} .ml10 {margin-left:10px} .ml15 {margin-left:15px} .ml20 {margin-left:20px} .ml25 {margin-left:25px} .ml30 {margin-left:30px} .ml40 {margin-left:40px} .ml50 {margin-left:50px} .ml100 {margin-left:100px} .ml-4 {margin-left:-4px} .ml-20 {margin-left:-20px} .mb-10 {margin-bottom:-10px} .mb0 {margin-bottom:0px} .mb5 {margin-bottom:5px} .mb10 {margin-bottom:10px} .mb15 {margin-bottom:15px} .mb20 {margin-bottom:20px} .mb30 {margin-bottom:30px} .mb50 {margin-bottom:50px} .p0 {padding:0} .pad20 {padding:20px} .pt10 {padding-top:10px} .pt20 {padding-top:20px} .pt40 {padding-top:40px} .pt60 {padding-top:60px} .pt80 {padding-top:80px} .pt100 {padding-top:100px} .pb-10 {padding-bottom:-10px} .pb10 {padding-bottom:10px} .pb20 {padding-bottom:20px} .pl15 {padding-left:15px} .pl20 {padding-left:20px} .pl-20 {padding-left:-20px} .pl30 {padding-left:30px} .pl40 {padding-left:40px} .pl50 {padding-left:50px} .h3 {height:3px;} .h5 {height:5px;} .h10 {height:10px;} .h20 {height:20px;} .h30 {height:30px;} .h40 {height:40px;} .h50 {height:50px;} .h60 {height:60px;} .h70 {height:70px;} .h80 {height:80px;} .h100 {height:100px;} .h120 {height:120px;} .h130 {height:130px;} .h150 {height:150px;} .h200 {height:200px;} .h210 {height:210px;} .h250 {height:250px;} .h300 {height:300px;} .h400 {height:400px;} .h500 {height:500px;} .h600 {height:600px;} .h735 {height:735px;} .h800 {height:800px;} .w100p {width:100%} .w90p {width:90%} .w400 {width:400px;} .maxW500 {max-width:500px;} .maxW450 {width:450px} .z1 {z-index:1} .z2 {z-index:2} .z3 {z-index:3} .ind0 {text-indent:0px} .ind20 {text-indent:20px} .ind30 {text-indent:30px} .maj {text-transform:uppercase;} .gras, b {font-weight:bold;} .fs14 {font-size:14px;} .fs16 {font-size:16px;} .fs18 {font-size:18px;} .underline {text-decoration:underline;} .white {color:white;} .black {color:black} .red {color:red;} .bleu {color:#0ecbfa;} .justify {text-align: justify; text-justify: newspaper; word-wrap: break-word} .normal {font-weight: normal;} .orange {color:#c60} .yellow {color:#ffd200} .pink {color:#ff0065} .font-gris {color:#bbb} .opacity-05 {opacity:.5} .font-inactif {color:#888} .line90 {line-height:90%} .interligne1{height:1px;} .interligne5{height:5px;} .interligne10{height:10px;} .interligne12{height:12px;} .interligne15{height:15px;} .interligne25{height:25px;} .floatLeft {float:left} .floatNone {float:none} .imageVirtuelle, .imageVirtuelle a {font-size: .88em; text-align: center;} /*____________________________________________________MENU_______________________________________________*/ /* Important styles */ #toggle {display: block;position: fixed;right:10px;top:5px;width: 28px;height: 30px;margin: 30px auto 10px;z-index:9;} #toggle span:after, #toggle span:before {content: "";position: absolute;left: 0;top: -9px;} #toggle span:after {top: 9px;} #toggle span {position: relative;display: block;} #toggle span, #toggle span:after, #toggle span:before {width: 100%;height: 5px;background-color: #888;transition: all 0.3s;backface-visibility: hidden;border-radius: 2px;background-color:/*#ffd200*/#ffd200;} /* on activation */ #toggle.on span {background-color: transparent;} #toggle.on span:before {transform: rotate(45deg) translate(5px, 5px);} #toggle.on span:after {transform: rotate(-45deg) translate(7px, -8px);} #toggle.on + #menu {opacity: 1;visibility: visible;} /* menu appearance*/ #menu {position: fixed;list-style: none;z-index:9;color: #999;padding:5px 0;top:61px;width:100%;border-bottom: 1px solid /*#ffd200*/#ffd200; font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; background: black;opacity: 0;visibility: hidden;transition: opacity .4s;} #menu:after {content: "";display: block;} nav {position:fixed; top:90px; text-align:center;} nav ul {display:inline-block; position: relative; max-width:800px; margin:0 auto; text-align:center;} nav li {display:inline-block; line-height:15px; z-index:0; padding:6px 3px;} nav a {display:inline-block; text-align:center; list-style:none; background-color:rgba(0, 0, 0, .5); color:#fff; font-size:.75em; padding:5px; text-decoration:none; font-weight:normal; color:white;border:1px solid rgba(255, 255, 255, .3) ! important; transition:all .2s; -webkit-transition: color .7s ease-in-out; -moz-transition: color .7s ease-in-out; -o-transition: color .7s ease-in-out; transition: color .7s ease-in-out; } nav a:hover {display:inline-block; color:#000051; text-decoration:none; background-color:rgba(255, 255, 255, 1);} nav a:hover,nav a:focus {display:block; color:/*#ffd200*/#ffd200; background:rgba(255, 255, 255, .1)} .lienActif {color:white; background-color:rgba(255, 255, 255, .2)} .menu-encours {position: fixed; top:57px; right:10px; padding:3px 0 3px 3px; z-index:9; text-align:right; font-size:.8em; color:grey;} .menu-encours a {text-decoration:none;color:rgba(255, 255, 255, .7)} .calage-top {height:90px} .picto-contact {position:fixed; right:50px; top:20px; z-index:9;} a {padding: 0; font-size: 1em; color: #fff; text-decoration: underline;} a:hover {color: /*#ffd200*/#ffd200;-webkit-transition: color .2s ease-in-out;-moz-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out;transition: color .2s ease-in-out;} /*.display-0 {display:none} smartOnly*/ /*.diplay-1 {display:block} deskOnly*/ .smartOnly {display:none;} .div-header {position:fixed; width:100%; height:61px; background-color:rgba(0, 0, 0, 1); z-index:9; border-bottom:1px solid #ffd200 !important;/*#ffd200*/} .div-header2 {position:fixed; width:90px; height:45px; right:0; top:0; background-color:rgba(0, 0, 0, .8); z-index:9; display:none; } .logo {display:block; position:fixed; left:0;} .texte-header {position:fixed; text-align:center; width:100%; margin-top:7px; color:#999; z-index:9;} /*____________________________________________________PP_______________________________________________*/ html {background-color:#000; width:100%;-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} body {overflow-x:hidden; width:100%; /*max-width:850px;*/ font-family: 'Open Sans', sans-serif;color:#fff;background-color:rgba(0, 0, 0, 0); -webkit-animation: fadein 3s;-moz-animation: fadein 3s;/*fade in body*/ -ms-animation: fadein 3s;-o-animation: fadein 3s;animation: fadein 3s;} .content {padding-top:30px;} .blocTexte {max-width: 800px; text-align: left; padding:20px 20px 20px 30px; margin:50px; text-justify: newspaper; word-break: break-word;/*word-wrap: break-word;*/ color: #fff;} .blocPlaylist {text-align: left; padding: 0px 20px 0px 10px; line-height:1,5;font-size:0.95em;} .blocVignette {max-width: 800px; text-align: left; padding: 20px 20px 20px 30px; margin:50px;} .blocVignette a figure {border: 1px solid lightgrey; } .vignette {margin: 20px 22px; } .cadre {border: 1px solid lightgrey; margin: 0px;} video, #video-archives {max-width: 800px; height: auto; text-align: left; border-style:solid; border-width:1px;margin-left:50px;} .diaporama {max-width: 800px; margin-bottom:20px; margin-left:25px; text-align:left !important; } .credit-audio {font-size: .9em; font-style: italic; padding: 0; margin: 0; } .credit-diapo {font-size: .9em; font-style: italic;margin:-15px 0px 0px 30px;} .credit-video {font-size: .9em; font-style: italic;margin:0px 0px 0px 50px;} /* aside { position:fixed; text-align:right; width:100%; line-height:120% !important; height:700px; top:130px; right:-17px; overflow-y: visible !important; overflow-y: scroll !important;} aside a {text-decoration:none !important;} .aside-titre {font-size: 1.15em; color:#0ecbfa;} .aside-titre a {font-size: 1em !important; color:#0ecbfa;} .aside-spectacle {font-size: 1em; display:block;} .aside-bg {max-width: 300px; padding: 20px; background-color: rgba(0, 0, 0, .2);} .aside-vignette {border: 1px solid lightgrey; margin: 10px 0px 0px 0px;} .aside-vignette:hover {zoom: 1; filter: alpha(opacity=50); opacity: 0.5; -webkit-transition: opacity .2s ease-in-out;-moz-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out;-o-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out;} */ .portrait {margin-right:15px; margin-top:17px;} .spectacle {margin-right:15px; margin-top:17px;border: 1px solid lightgrey;} .espace {display:block;} .calage-contact {padding-top:90px} .logo-contact {float:right;margin-right:10px;} .responsive {display: inline-block; max-width: 100%; margin:0 auto;text-align:center;} .imgAccueil {padding:10px 15px 10px 0px} /*____________________________________________________@MEDIA QUIERIES_______________________________________________*/ @media screen and (max-width: 1150px) { /* aside {max-width: 800px; text-align:left; position:relative; height:auto; top:0px;right:0px; padding-left:50px; margin-left: 50px; overflow-y: hidden !important;} .aside-bg {max-width: 800px; padding-left: 30px;} .aside-vignette {margin: 10px 20px 0px 0px;}*/ .espace {display:none;} .logo-contact {float:none;margin-right:0px;} } @media screen and (max-width: 1050px) { aside {/*right:0px; padding-right:20px; margin-right:0px;*/} video , #video-archives{max-width: 800px; margin-bottom:20px; text-align:center; } .diaporama {max-width: 800px; margin-bottom:20px; margin-left:25px; text-align:left; } .credit-diapo {left:0px !important; margin:-15px 0px 0px 15px; float:left;} .credit-video {left:0px !important; margin:-20px 0px 0px 35px; float:left;} .blocTexte {max-width: 800px; left:0px; /*margin:30px;*/ } .blocVignette {max-width: 800px; left:0px; margin:30px; } } @media screen and (max-width: 930px) { /*.aside-titre {font-size: 1.3em; text-indent:20px;} .aside-spectacle {display:none} .aside-bg {max-width: 100%; top:0px; right:0px; left:0px; padding-left:30px; margin-left: 0px;}*/ .imgAccueil {} .blocTexte {max-width: 100%; left:0px; /*padding-right:10px; margin-left:0px;>>>*/margin:0px; } .blocVignette {max-width: 100%; left:0px; padding-right:10px; margin-left:0px; } video , #video-archives{max-width: 100%;margin-bottom:20px; margin:0 auto; } .diaporama {max-width: 100%;/* margin-left:12px;>>>>>>*/ display: inline-block; margin:0 auto; text-align:center;} .credit-diapo {margin:0px 0px 0px 40px; } .spectacle {float:none; margin-right:0px; } } @media screen and (max-width: 800px) { video, #video-archives{display: inline-block; max-width: 100%; margin:0 auto;text-align:center;} .credit-diapo {margin:0px 0px 0px 5px; } .credit-video {margin:0px 0px 0px 5px;} .smartOnly {display:block;} } @media screen and (max-width: 645px) { aside {padding-left:20px; margin: 20px 0px;} /*.aside-bg {padding-left:20px; margin: 20px 0px;}*/ .blocTexte {/*padding-left:20px;*/ margin: 20px 0px;} .blocVignette {/*padding-left:20px;*/ margin: 20px 0px;} video, #video-archives{margin: 20px 1px 20px 0px;border-style:solid;} .diaporama {padding-right:1px; margin: 20px 0px 20px 0px;} .credit-video {margin:-20px 0px 0px 5px;} .calage-contact {padding-top:120px} } @media screen and (max-width: 500px) { .texte-header {font-size: .85em;} .imgAccueil {float:none; text-align:center; width:100%;} } @media screen and (max-width: 440px) { .texte-header {font-size: .70em; color:#fff;} } @media screen and (max-width: 380px) { .texte-header {font-size: .60em;} } /*____________________________________________________@LANDSCAPE_______________________________________________*/ @media (max-device-width:768px) and (orientation: landscape) { html {} }