@charset "UTF-8"; /*! * www.KNACSS.com V3.0.4 (2014-06-30) @author: Raphael Goetter, Alsacreations (with help from Hugo Giraudel) * Licence WTFPL http://www.wtfpl.net/ */ /* ----------------------------- */ /* == soft reset */ /* ----------------------------- */ /* switching box model for all elements */ * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* soft reset */ html, body {margin: 0; padding: 0; } ul, ol {padding-left: 2em; } ul.unstyled {list-style: none; } img {height: auto; vertical-align: middle; border: 0; } audio, canvas, video {display: inline-block; } svg:not(:root) {overflow: hidden; } /* ----------------------------- */ /* == typography */ /* ----------------------------- */ html {/* set base font-size to equiv "10px", which is adapted to rem unit */ font-size: 62.5%; /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */ /* thanks to @guardian, @victorbritopro and @eQRoeil */ font-size: -webkit-calc(1em * 0.625); font-size: calc(1em * 0.625); /* disallow text zooming on orientation change (non standard property) */ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body {/* set body font-size in em (1.4em equiv "14px") */ font-size: 1.4em; background-color: white; color: black; font-family: Helvetica, Arial, sans-serif; line-height: 1.5; } a {color: #333333; } a:hover, a:focus, a:active {color: black; } /* font-sizing for content */ p, .p-like, ul, ol, dl, blockquote, pre, td, th, label, textarea, caption, details, figure {margin-top: 0; margin-bottom: 0.5em; line-height: 1.5; } h1, .h1-like {font-size: 3.2rem; font-family: Helvetica, Arial, sans-serif; } h2, .h2-like {font-size: 2.8rem; font-family: Helvetica, Arial, sans-serif; } h3, .h3-like {font-size: 2.4rem; } h4, .h4-like {font-size: 2rem; } h5, .h5-like {font-size: 1.8rem; } h6, .h6-like {font-size: 1.6rem; } /* alternate font-sizing */ .smaller {font-size: 0.71429em; } .small {font-size: 0.85714em; } .big {font-size: 1.14286em; } .bigger {font-size: 1.28571em; } .biggest {font-size: 1.42857em; } code, pre, samp, kbd {/* IE fix */ white-space: pre-line; white-space: pre-wrap; font-family: Consolas, "DejaVu Sans Mono", Courier, monospace; line-height: normal; } em, .italic, address, cite, dfn, i, var {font-style: italic; } strong, .bold {font-weight: bold; } small, sub, sup {font-size: smaller; } /* ----------------------------- */ /* == hiding content */ /* ----------------------------- */ /* hidden but not for assistance tools, Yahoo! method */ .visually-hidden {position: absolute !important; border: 0 !important; height: 1px !important; width: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(1px, 1px, 1px, 1px) !important; } body > script {display: none !important; } @media (max-width: 767px) {.no-small-screen {display: none; } } @media (min-width: 1024px) {.no-large-screen {display: none; } } /* ----------------------------- */ /* == browsers consistency */ /* ----------------------------- */ /* avoid top margins on first content element */ p:first-child, .p-like: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 .p-like, li ul, li ol {margin-top: 0; margin-bottom: 0; } /* max values */ img, table, td, blockquote, code, pre, textarea, input, video {max-width: 100%; } /* margin-bottom on tables */ table {margin-bottom: 2em; } /* ----------------------------- */ /* ==layout and modules */ /* ----------------------------- */ /* 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 {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; vertical-align: top; } /* alignments (blocks and inline) */ /* ------------------------------ */ /* left (or starting) elements */ .left, .skipLink, .skipLink + button, .top [class^=nav-], #header .logo-site, #header .nav-main ul, .article-full .top-article img, .page-reference aside h2, .start {float: left; } img.left, img.skipLink, .top img[class^=nav-], #header img.logo-site, .article-full .top-article img, img.start {margin-right: 1em; } /* right (or ending) elements */ .right, #header .nav-main, #header .nav-main .block-search, #header .container-menu, .article-full .top-article p, .page-reference aside p, .block-form .form-submit input, .end {float: right; } img.right, #header img.nav-main, #header .nav-main img.block-search, #header img.container-menu, img.end {margin-left: 1em; } img.left, img.skipLink, .top img[class^=nav-], #header img.logo-site, .article-full .top-article img, img.right, #header img.nav-main, #header .nav-main img.block-search, #header img.container-menu, img.start, img.end {margin-bottom: 0.5em; } .center {margin-left: auto; margin-right: auto; } .txtleft {text-align: left; } .txtright {text-align: right; } .txtcenter {text-align: center; } /* blocks widths (percentage 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; } .wauto {width: auto; } /* spacing helpers p,m = padding,margin a,t,r,b,l = all,top,right,bottom,left s,m,l,n = small, medium, large, none */ .man {margin: 0; } .pan {padding: 0; } .mas {margin: 1em; } .mam {margin: 2em; } .mal {margin: 4em; } .pas {padding: 1em; } .pam {padding: 2em; } .pal {padding: 4em; } .mtn {margin-top: 0; } .mts {margin-top: 1em; } .mtm {margin-top: 2em; } .mtl {margin-top: 4em; } .mrn {margin-right: 0; } .mrs {margin-right: 1em; } .mrm {margin-right: 2em; } .mrl {margin-right: 4em; } .mbn {margin-bottom: 0; } .mbs {margin-bottom: 1em; } .mbm {margin-bottom: 2em; } .mbl {margin-bottom: 4em; } .mln {margin-left: 0; } .mls {margin-left: 1em; } .mlm {margin-left: 2em; } .mll {margin-left: 4em; } .ptn {padding-top: 0; } .pts {padding-top: 1em; } .ptm {padding-top: 2em; } .ptl {padding-top: 4em; } .prn {padding-right: 0; } .prs {padding-right: 1em; } .prm {padding-right: 2em; } .prl {padding-right: 4em; } .pbn {padding-bottom: 0; } .pbs {padding-bottom: 1em; } .pbm {padding-bottom: 2em; } .pbl {padding-bottom: 4em; } .pln {padding-left: 0; } .pls {padding-left: 1em; } .plm {padding-left: 2em; } .pll {padding-left: 4em; } /* ---------------------------------- */ /* ==classic grids */ /* .. use it when gutter size matters */ /* ---------------------------------- */ /* grids inspired from SUIT https://github.com/suitcss/suit */ /* overall container of grids */ .grid {overflow: hidden; } /* global styles for direct child ex. .grid3 */ .grid > * {display: block; padding: 0; /* gutter value */ margin-left: -25px; text-align: left; } /* global styles for each "cell" */ .grid > * > * {display: inline-block; /* gutter value */ padding-left: 25px; margin-left: 0; vertical-align: top; } /* whitespace fixing for modern browsers including IE9+ */ :root .grid {font-size: 0; /* fallback for IE9+ */ text-justify: distribute-all-lines; } :root .grid > * > * {/* fallback for Opera Mini */ font-size: 14px; font-size: 1.4rem; } /* Opera hack */ .opera:-o-prefocus, .grid > * {word-spacing: -0.43em; } .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: 767px) {.grid3 > *, .grid4 > *, .grid5 > *, .grid6 > *, .grid8 > *, .grid10 > *, .grid12 > * {width: 50%; } } @media (max-width: 320px) {.grid > * > * {width: 100% !important; } } /* ---------------------------------- */ /* ==autogrids */ /* .. to automatically justify blocs */ /* ---------------------------------- */ /* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */ /* container of autogrids */ [class*="autogrid"] {text-align: justify; } [class*="autogrid"]:after {content: ""; display: inline-block; width: 100%; } [class*="autogrid"] > * {display: inline-block; vertical-align: top; text-align: left; } /* whitespace fixing for modern browsers including IE9+ */ :root [class*="autogrid"] {font-size: 0; /* fallback for IE9+ */ text-justify: distribute-all-lines; } :root [class*="autogrid"] > * {/* fallback for Opera Mini */ font-size: 14px; font-size: 1.4rem; } /* Opera hack */ [class*="autogrid"]:-o-prefocus {word-spacing: -0.43em; } .autogrid2 > * {width: 49%; } .autogrid3 > * {width: 32%; } .autogrid4 > * {width: 23.6%; } .autogrid5 > * {width: 19%; } .autogrid6 > * {width: 15%; } .autogrid8 > * {width: 10.8%; } .autogrid10 > * {width: 9%; } .autogrid12 > * {width: 6.4%; } @media (max-width: 1024px) {.autogrid5 > *, .autogrid6 > *, .autogrid8 > *, .autogrid10 > *, .autogrid12 > * {width: 32%; } } @media (max-width: 767px) {.autogrid5 > *, .autogrid6 > *, .autogrid8 > *, .autogrid10 > *, .autogrid12 > * {width: 49%; } } @media (max-width: 320px) {[class*="autogrid"] > * {width: 100%; } } /* ----------------------------- */ /* ==tables */ /* ----------------------------- */ table, .table {width: 100%; max-width: 100%; table-layout: fixed; border-collapse: collapse; vertical-align: top; border: 1px solid #ccc; } .table {display: table; } table#recaptcha_table, table.table-auto {table-layout: auto; } caption {padding: 1em; color: #555; font-style: italic; } td, th {padding: 0.3em 0.8em; border: 1px #aaa dotted; vertical-align: top; min-width: 2em; cursor: default; text-align: left; } /* ----------------------------- */ /* ==forms */ /* ----------------------------- */ /* thanks to HTML5boilerplate, * github.com/nathansmith/formalize and www.sitepen.com */ /* buttons */ .btn {display: inline-block; } /* forms items */ form, fieldset {border: none; } input, button, select, label, .btn {vertical-align: middle; font-family: inherit; font-size: inherit; } label {display: inline-block; vertical-align: middle; cursor: pointer; } legend {border: 0; white-space: normal; } textarea {min-height: 5em; vertical-align: top; font-family: inherit; font-size: inherit; resize: vertical; } /* clickable input types in iOS */ button, input[type="button"], input[type="reset"], input[type="submit"] {cursor: pointer; -webkit-appearance: button; } 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: -0.1em; margin: 0 0.3em 0 0; font: 1.4em/1 sans-serif; color: #000; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1); speak: none; } @media (min-device-width: 767px) {.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; } /* ----------------------------- */ /* ==desktop and HD devices */ /* ----------------------------- */ @media (min-width: 767px) {/* rules for big resources and big screens like: background-images, font-faces, etc. */ } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {/* style adjustments for high density devices */ } /* ---------------------------------- */ /* ==Responsive large / small / tiny */ /* ---------------------------------- */ @media (min-width: 1024px) {/* layouts for large screens */ .large-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 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, .large-wauto {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 screens */ .large-man {margin: 0 !important; } } @media (max-width: 767px) {/* quick reset in small resolution and less */ .w600p, .w700p, .w800p, .w960p, .mw960p {width: auto; float: none; } /* layouts for small screens */ .small-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 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, .small-wauto {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 screens */ .small-man {margin: 0 !important; } .small-pan {padding: 0 !important; } } @media (max-width: 320px) {/* quick tiny resolution 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 screens */ .tiny-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 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, .tiny-wauto {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 screens */ .tiny-man {margin: 0 !important; } .tiny-pan {padding: 0 !important; } } /* flexbox layout Tutorial: http://knacss.com/demos/tutoriel.html#flex */ .flex {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .flex-h {-webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .flex-v {-webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .flex-fluid {-webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .flex-start {-webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; order: -1; } .flex-mid {-webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .flex-end {-webkit-box-ordinal-group: 43; -webkit-order: 42; -ms-flex-order: 42; order: 42; } /* quick print reset */ @media print {* {background: transparent !important; -webkit-box-shadow: none !important; box-shadow: none !important; text-shadow: none !important; } body {width: auto !important; margin: auto !important; font-family: serif; font-size: 12pt; background-color: #fff !important; color: #333 !important; } p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol {color: #000 !important; margin: auto !important; } .print {display: block; } .no-print {display: none; } img {-webkit-filter: grayscale(100%); filter: grayscale(100%); } /* no orphans, no widows */ p, blockquote {orphans: 3; widows: 3; } /* no breaks inside these elements */ blockquote, ul, ol {page-break-inside: avoid; } /* page break before main headers */ h1 {page-break-before: always; } /* no breaks after these elements */ h1, h2, h3, caption {page-break-after: avoid; } a {color: #000 !important; text-decoration: underline !important; } /* displaying URLs */ a[href]:after {content: " (" attr(href) ")"; } a[href^="javascript:"]:after, a[href^="#"]:after {content: ""; } } /* ----------------------------- */ /* ==booleans */ /* ----------------------------- */ /* styling skip links */ .skip-links {position: absolute; } .skip-links a {position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); padding: 0.5em; background: black; color: white; text-decoration: none; } .skip-links a:focus {position: static; overflow: visible; clip: auto; } @media (max-width: 767px) {/* 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; hyphens: auto; } } /* ----------------------------- */ /* ==gmaps support */ /* ----------------------------- */ /* Google Gmap3 bug fix on images */ .gm-style img {height: 100%; } :not(.gm-style) img {height: auto; } .gm-style img, .gmnoscreen img, .gmnoprint img {max-width: none !important; } /* ----------------------------- */ /* ==IE6, IE7, IE8 support */ /* ----------------------------- */ /* IE678 support */ .ie678 h1, .ie678 .h1-like {font-size: 2.28571em; } .ie678 h2, .ie678 .h2-like {font-size: 2em; } .ie678 h3, .ie678 .h3-like {font-size: 1.71429em; } .ie678 h4, .ie678 .h4-like {font-size: 1.42857em; } .ie678 h5, .ie678 .h5-like {font-size: 1.28571em; } .ie678 h6, .ie678 .h6-like {font-size: 1.14286em; } .ie678 img {width: auto; /* @bugfix for IE8 */ } .ie678 .gm-style img {height: 100%; } /* hasLayout for IE6/IE7 */ .clearfix, .line, .mod, .row, .col {*zoom: 1; } /* inline-block and table-cell for IE6/IE7 */ /* warning: .col needs width on IE6/IE7 */ .btn, .col, .inbl {*display: inline; *zoom: 1; } .visually-hidden {*clip: rect(1px 1px 1px 1px); } /* IE8 grid hack */ .ie8 .grid > *, .ie8 [class*="autogrid"] > * {letter-spacing: -0.31em; text-rendering: optimizespeed; } .ie8 .grid > * > *, .ie8 [class*="autogrid"] > * > * {letter-spacing: normal; word-spacing: normal; text-rendering: auto; } /* IE7 grid hack */ .grid > * > *, [class*="autogrid"] > * > * {*display: inline; *zoom: 1; } /* forms */ /* Corrects excess space around these inputs in IE8/9 */ .ie678 input[type="checkbox"], .ie678 input[type="radio"] {padding: 0; } /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */ .ie678 textarea {overflow: auto; } /* Active box-sizing for IE6/IE7 */ /* @source https://github.com/Schepp/box-sizing-polyfill */ /* .ie67 * {behavior: url(http://student.openworldforum.paris/lib/box-sizing-polyfill/boxsizing.htc); } */ /* ----------------------------- */ /* ==minor stylings */ /* ----------------------------- */ /* styling elements */ code, kbd, mark {border-radius: 2px; } kbd {padding: 0 2px; border: 1px solid #999; } code {padding: 2px 4px; background: rgba(0, 0, 0, 0.04); color: #b11; } pre code {padding: none; background: none; color: inherit; border-radius: 0; } mark {padding: 2px 4px; background: #ff0; } sup, sub {vertical-align: 0; position: relative; } sup {bottom: 1ex; } sub {top: 0.5ex; } blockquote {margin-left: 0; padding-left: 1em; border-left: 4px solid rgba(0, 0, 0, 0.15); font-style: italic; } q {font-style: normal; } q, .q {quotes: "“\00a0" "\00a0”"; } q:lang(fr), .q:lang(fr) {quotes: "«\00a0" "\00a0»"; } hr {display: block; clear: both; height: 1px; margin: 1em 0 2em; padding: 0; border: 0; color: #ccc; background-color: #ccc; } /* 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, 0.05); } /* striped-vert tables */ .striped-vert tr > :first-child {background: #eee; background: rgba(0, 0, 0, 0.05); } /*generic styles*/ /*body {background:#f2f2f2 url(/student-sub/wp-content/themes/catch-box/css/img/bg.jpg) no-repeat 50% 0;color:#3f474d;font-family:'Open Sans',sans-serif;}*/ /*Font*/ @font-face {font-family: Dosis_bold;src: url(/student-sub/wp-content/themes/catch-box/font/Dosis-Bold.ttf);} @font-face {font-family: Dosis_extra_bold;src: url(/student-sub/wp-content/themes/catch-box/font/Dosis-ExtraBold.ttf);} @font-face {font-family: Dosis_extre_light;src: url(/student-sub/wp-content/themes/catch-box/font/Dosis-ExtraLight.ttf);} @font-face {font-family: Dosis_light;src: url(/student-sub/wp-content/themes/catch-box/font/Dosis-Light.ttf);} @font-face {font-family: Dosis_medium;src: url(/student-sub/wp-content/themes/catch-box/font/Dosis-Medium.ttf);} @font-face {font-family: Dosis_regular;src: url(/student-sub/wp-content/themes/catch-box/font/Dosis-Regular.ttf);} @font-face {font-family: Dosis_semi_bold;src: url(/student-sub/wp-content/themes/catch-box/font/Dosis-SemiBold.ttf);} /*header*/ header h1 {margin:0;} header nav {background:#3c5b6e;} header nav ul {clear:both;overflow:hidden;margin:0;padding:0;} header nav li { float: left; width: 25%; list-style-type: none; font-size: 0.9em; } header nav a { height: 3em; line-height: 2em; display: block; padding-top: 9px; color: #fff; font-size: 1.571em; font-weight: 700; text-align: center; text-decoration: none; font-family: Dosis_semi_bold; } header nav a:hover {color:#fff;text-decoration:none;background-color: #303c49;} header nav li:nth-child(odd) a {border:1px solid #848484;border-width:0 1px;} /*main*/ .main {padding:0 0px 0px;background:#fff;} .main h1 {display:inline-block;margin-top:55px;margin-bottom:45px;border-bottom:5px solid #e4e4e4;color:#33667b;font-size:3.071em;line-height:1.2;font-family: Dosis_semi_bold;} .main .lead {margin-bottom:28px;font-size:1.714em;font-weight:700;line-height:1.2;font-family: Dosis_regular;} .main .autogrid3 {margin-bottom:40px;} .main .autogrid3 .block {background:#f2f2f2; height:195px;} .main .autogrid3 .block h2 {margin:0;padding:15px 0;background:#f09c23;color:#fff;font-size:1.929em;text-align:center;text-transform:uppercase;} .main .autogrid3 .block:first-child h2 {background:#1fb8d6;} /*#1fb8d6*/ .main .autogrid3 .block:last-child h2 {background:#d54f58;} .main .autogrid3 .block div {padding:20px 15px;min-height:7.5em;} .main p {margin-bottom:21px;line-height:1.3;font-family: Dosis_light;font-size: 1.3em} .main strong em {font-style:normal;text-transform:uppercase;} .main h2 {margin-bottom:14px;font-size:2em;line-height:1.2;font-family: Dosis_bold;color:#33667b;} .main h3 {margin-bottom:12px;font-size:1.429em;font-family: Dosis_bold;color:#33667b;} .main .text ul {padding:0;} .main .text li {position:relative;list-style-type:none;padding:0 0 0 15px;margin-bottom:7px;line-height:1.2;font-family: Dosis_light;font-size: 1.3em} .main .text li:before {content:'•';position:absolute;top:-6px;left:0;color:#33667b;font-size:1.5em;} .main .text li span {display:block;color:#33667b;} .description {margin-top:30px;padding:2% 3%;background:#e9e9e9;} .projets div div {margin:15px 0;min-height:120px;color:#fff;} .projets div:nth-child(3n+1) div {background:#f09c23;} .projets div:nth-child(3n+2) div {background:#1fb8d6;} .projets div:nth-child(3n+3) div {background:#d54f58;} .main .projets h2 a {display:block;border-bottom:2px solid #f9f9f9;color:#fff;text-decoration:none;} .main .projets h2 a:hover {border-color:#f9f9f9;color:#f9f9f9;} .main .list-date li:before {top:-2px;} .main .list-date span {font-weight:600; font-family: Dosis_semi_bold;font-size:1.0em} .main .list-date strong {font-size:1.0em;font-family: Dosis_bold;} .main .like-button {max-width:450px;margin-top:30px;background:#33667b url(/student-sub/wp-content/themes/catch-box/img/btn_fleche_bleu_off.png) no-repeat 0 50%;border-radius:5px;} .main .grid2 .like-button {max-width:350px} .main .like-button a {display:block;padding:15px 10px 15px 97px;color:#fff;font-size:2.429em;font-weight:400;line-height:1;text-decoration:none;font-family: Dosis_bold;} .main .like-button a:hover {text-decoration:none;background:#4487a3 url(/student-sub/wp-content/themes/catch-box/img/btn_fleche_bleu_on.png) no-repeat 0 50%;border-radius:5px;} .main .like-button span {display:block;font-size:0.7em;font-weight:700;font-family: Dosis_semi_bold;} section .block {margin-bottom:40px;} .block-aside {float:left;} .block-aside img {margin:0 24px 24px 0;} .block-txt {overflow:hidden;} .block-txt h2 {margin:0;font-size:1.429em;font-style:italic;line-height:1.1;font-weight:600;} .block-txt span {display:block;font-weight:300;} .block-txt p {margin:0;} .block-txt .society {margin-top:7px;} .block-txt .twitter a, .block-txt .society {color:#777;line-height:1.1;} .block-txt .twitter {margin:0 0 5px;padding-left:18px;background:url(/student-sub/wp-content/themes/catch-box/img/twitter-fig.png) no-repeat 0 5px;} .block-txt .twitter a {text-decoration:none;} .block-txt .twitter a:hover {text-decoration:underline;} /*footer*/ /*#footer {padding:40px 20px 29px 27px;background:url(/student-sub/wp-content/themes/catch-box/img/footer-bg.png) no-repeat 0 0;}*/ #footer h2 {margin:0 0 20px 80px;color:#33667b;font-size:3.071em;font-weight:300;line-height:.9} #footer h1 {display:inline-block;margin-top:55px;margin-bottom:45px;border-bottom:5px solid #e4e4e4;color:#33667b;font-size:3.071em;line-height:1.2;font-family: Dosis_semi_bold;} #footer ul {padding:0px 0px 50px 30px; display: inline-block;} #footer li {display:inline-block; margin:0 46px 18px 0px;} #footer p {padding:0 0 0 46px;font-size: 1.6em;line-height: 2em;} #footer p a {color:#fff;} #footer p.contact {background:url(/student-sub/wp-content/themes/catch-box/img/email_bleu.png) no-repeat 0 0; display: inline-block; float: right;padding-right: 50px; background-position: right;font-family: Dosis_medium;} #footer p.visit {background:url(/student-sub/wp-content/themes/catch-box/img/fleche_bleu.png) no-repeat 0 0; display: inline-block;font-family: Dosis_medium;} #footer .block + .block ul {margin: 0px auto; width: 57%;; text-align: center; padding-bottom: 0px; padding-left: 75px;} #footer .block + .block li {margin:0 0 20px 8px;} #footer .block + .block img {height:38px;} #footer {padding:0 0px 50px;background:#fff;} .h-list-social {padding:20px 10px 0px 38px; background-color: #33667b; width: 100%} /*progress-bar vote*/ .vote-mod-int {margin-top:40px;padding:2% 3%;background:#e9e9e9;} .vote-mod-int h1 {margin:10px 0;font-size:1.5em;border:none;} .vote-mod-int p strong {font-size:1.5em;} .vote-mod-int h2 {font-size:1.2em;} .vote-mod-int p {color:#33667b;} .vote-mod-int input[type="button"] {height:40px;line-height:40px;padding:0 30px;background:#33667b url(/student-sub/wp-content/themes/catch-box/img/arrow-btn.png) no-repeat -10px 50%;background-size:32%;border:none;border-radius:5px;color:#fff;font-size:1.5em;font-weight:600;} .wp-polls-ul input {margin:0 10px 5px;} .pollbar, .progress {overflow: hidden; height: 40px !important; margin-bottom: 20px !important; background-color: #f5f5f5 !important; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } .progress-bar {float: left; width: 0%; height: 100%; font-size: 12px; line-height: 40px; color: #ffffff; text-align: center; background-color: #428bca; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-transition: width 0.6s ease; -o-transition: width 0.6s ease; transition: width 0.6s ease; } .progress-striped .progress-bar, .progress-bar-striped {background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 40px 40px; } .progress.active .progress-bar, .progress-bar.active {-webkit-animation: progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; } .progress-bar[aria-valuenow="1"], .progress-bar[aria-valuenow="2"] {min-width: 30px; } .progress-bar[aria-valuenow="0"] {color: #777777; min-width: 30px; background-color: transparent; background-image: none; box-shadow: none; } .pollbar, .progress-bar-success {background-color: #5cb85c !important; } .pollbar, .progress-striped .progress-bar-success {background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important; background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important; background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important; } .pollbar:nth-child(odd), .progress-bar-info {background-color: #5bc0de !important;} .pollbar:nth-child(odd), .progress-striped .progress-bar-info {background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important; background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important; background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important; } .progress-bar-warning {background-color: #f0ad4e;} .progress-striped .progress-bar-warning {background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-bar-danger {background-color: #d9534f;} .progress-striped .progress-bar-danger {background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } /*formulaire*/ .form legend {margin-bottom:20px;color:#33667b;font-size:3.071em;} .form p {margin-bottom:10px;} .form .control-group {margin:10px 0;} .form .control-group p {margin:0;} .form label {font-size:1.1em;font-weight:600;} .form input[type="text"] {padding:1% 2%;width:100%;height:30px;border:none;background:#e9e9e9;} .t_accent {color:#33667b;} .message {margin-top:20px;} .message label {display:block;} .message textarea {width:99%;padding:2%;border:none;background:#e9e9e9;} .form input[type="submit"], .form button {margin-top:30px;padding:0 20px;min-height:40px;background:#33667b;color:#fff;font-size:1.2em;border:none;border-radius:4px;} /*front-page (Edition)*/ #tabs { display: inline-block; margin:10px 0px 0px 10px; } .article-edition { display: inline-block; width: 530px; } .article-edition h2{ font-family: Dosis_bold; font-style: normal; font-weight: 900; color:black; } .article-edition h2 span{ font-family: Dosis_bold; font-style: italic; font-weight: 900; color:#33667b; font-size: 1.25em; } .aside-edition { display: inline-block; width:300px; vertical-align: top; margin-left: 50px; margin-top: 15px; } .aside-edition h2{ line-height: 50px; color: white; margin-bottom: 0px; background-color: #3f464c; padding-left: 25px; font-family: Dosis_regular; font-style: normal; font-weight: 400; font-size: 2em; } .aside-edition ul { background-color: #e4e4e4; padding-left: 0px; } .ui-tabs-vertical { width: 900px; } .ui-tabs-vertical .ui-tabs-nav { width: 300px; } .ui-tabs-vertical .ui-tabs-nav li { border-bottom: 1px solid white; list-style-type: none; line-height: 50px; font-family: Dosis_regular; font-size: 1.3em; font-weight: 590; } .ui-tabs-vertical .ui-tabs-nav li a { display:block; text-decoration: none; padding-left: 25px; color: #3f464c; } .ui-tabs-vertical .ui-tabs-nav li:hover{ } .ui-tabs-vertical .ui-tabs-nav li a:hover { background-color: #33667b; color: white; } .ui-tabs-vertical .ui-tabs-nav li a:focus { background-color: #33667b; color: white; } .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: 0; } .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em; } @media (max-width:900px){ body{ font-size:12px; } .home .block-aside { display:block; } .home .block-txt { float:left; } .main .like-button a {font-size:3rem;} .main .like-button span {font-size:3rem;} #footer {background-image:none;} #footer p a {color: white;font-size: 1.5rem} #footer h2 {margin:20px 0;font-size:2em;} #footer .block + .block ul {text-align:center;width: 59%;} #footer .block + .block li {width:auto;margin:0 10px 10px 0;} .article-edition {display: block; width: 100%;} .aside-edition {display: block; float: left;margin-left:auto;} .ui-tabs-vertical .ui-tabs-panel { float: left; } } @media (max-width: 767px){ header nav li {float:none;width:100%;} header nav li:nth-child(odd) a {border-width:1px 0;} .main .like-button a {font-size:2em;} .vote-mod-int ul {margin:0;} .ui-tabs-vertical { width: 767px; } #footer p.visit {display: block; background-position: center;padding-left: 132px;width: 100%;} #footer p a {color: white;font-size: 1.5rem;text-decoration: none;} #footer .block + .block ul {text-align: center;border-bottom: 1px solid grey;border-top: 1px solid grey;padding-top: 12px; width: 100%;} #footer p.contact {display:block;background-position: center;float: center;padding-left: 200px;width: 100%} .h-list-social{text-align: center;} } @media (max-width:630px){ .main .like-button a {font-size:2rem;} .main .like-button span {font-size:2rem;} .ui-tabs-vertical { width: 100%; margin:0; } #footer ul { padding-left: 40px; /*width: 300px;*/ } #footer p { width: 300px; } .describe-winner-jury { padding-left: 15px; display: inline-block; float: left; margin: 0; max-width: 50%; } .ui-tabs-vertical .ui-tabs-panel { padding: 0; float: left; width: 100%; } .main .describe-winner-jury p { margin-bottom: 0px; line-height: 1em; } .main .membre-jury { width: auto !important; } .block-think-edition { height: 450px !important; width: 93% !important; } .block-code-edition { height: 450px !important; width: 93% !important; } div.portrait-think-edition { width: 99% !important; border-right: 0px !important; } .block-code-edition-gagne { display: block !important; margin: 30px 0 0 0 !important; } } @media (max-width:540px){ .ui-tabs-vertical .ui-tabs-panel { padding: 0; float: left; width: 300px; } .gallery-block-edition { background: #fff; position: relative; clear: both; height: 721px; margin-bottom: 100px; width: 275px; } } @media (max-width:340px){ .article-edition {width: 50%;} .aside-edition {width:275px;} #tabs-1 { display:none !important; } .main { padding: 0 10px 50px; background: #fff; } .ui-tabs-vertical .ui-tabs-nav { width: 275px; } /* .ui-tabs-vertical .ui-tabs-panel { padding: 0; float: left; width: 300px; } */ .main .describe-winner-jury p { margin-bottom: 0px; line-height: 1em; } .main .membre-jury { width: auto !important; } } /*hide loader*/ .wp-polls-loading { display: none; } a[href="#ViewPollResults"] {display:none;} /*dissimule la barre d'admin*/ #wpadminbar { display:none; } /*------------ Rubrique "THINK" ------------*/ .main .autogrid3 .block div.win-wrapper,.main .autogrid3 .block div.gagnant, .main .autogrid3 .block div.gagnant img { margin:0; padding:0; } div.win-wrapper { float:left; overflow: hidden; } div.gagnant { position:relative; top:-18px; } div.gagnant::before { content:"GAGNANT"; display:block; color:white; font-size:12px; position:relative; top:30px; left:-30px; z-index:10; transform:rotate(-35deg); text-align:center; background:#1fb8d6; } /*--------------- Rubrique "Code"---------------*/ .main .autogrid3 .block div.win-wrapper, .main .autogrid3 .block div.gagnant-code, .main .autogrid3 .block div.gagnant-code img { margin:0; padding:0; } div.win-wrapper { float:left; overflow: hidden; } div.gagnant-code { position:relative; top:-18px; } div.gagnant-code::before { content:"GAGNANT"; display:block; color:white; font-size:12px; position:relative; top:33px; left:-30px; z-index:10; transform:rotate(-35deg); text-align:center; background:#f09c23; } .main .autogrid3 .block div.public-choice { position:absolute; background-color: #33667b; color: white; min-height: 0; margin:0; padding:0; height:35px; float:left; width:95%; background-image:url('/student-sub/wp-content/themes/catch-box/img/prix_public.png'); background-size:30px 25px; background-repeat:no-repeat; background-position: 5% center; top:188px; } .main .autogrid3 .block div.public-choice::before { content: ""; position: absolute; width: 0; height: 0; border-width: 10px; border-style: solid; border-color: #33667b transparent transparent transparent; -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); top: -20px; left: 20px; } .main .autogrid3 .block div.public-choice p { float:left; color:white; padding: 8px 0 0 45px; font-weight: bold; font-size: 16px; } /*----------- Rubrique Experiment -------------*/ .main .autogrid3 .block div.win-wrapper,.main .autogrid3 .block div.gagnant-experiment, .main .autogrid3 .block div.gagnant-experiment img { margin:0; padding:0; } div.win-wrapper { float:left; overflow: hidden; } div.gagnant-experiment { position:relative; top:-18px; } div.gagnant-experiment::before { content:"GAGNANT"; display:block; color:white; font-size:12px; position:relative; top:35px; left:-30px; z-index:10; transform:rotate(-35deg); text-align:center; background:#d54f58; } /*------------ Nominé --------------*/ .main .autogrid3 .block div.win-wrapper, .main .autogrid3 .block div.nomine, .main .autogrid3 .block div.nomine-vert, .main .autogrid3 .block div.nomine-bleu, .main .autogrid3 .block div.nomine img, .main .autogrid3 .block div.nomine-vert img, .main .autogrid3 .block div.nomine-bleu img { margin:0; padding:0; } div.win-wrapper { float:left; overflow: hidden; } div.nomine { position:relative; top:-18px; } div.nomine-vert { position:relative; top:-18px; } div.nomine-bleu { position:relative; top:-18px; } div.nomine::before { content:"NOMINEE"; display:block; color:white; font-size:12px; position:relative; top:35px; left:-30px; z-index:10; transform:rotate(-35deg); text-align:center; background:#1fb8d6; } div.nomine-vert::before { content:"NOMINE"; display:block; color:white; font-size:12px; position:relative; top:35px; left:-30px; z-index:10; transform:rotate(-35deg); text-align:center; background:#f09c23; } div.nomine-bleu::before { content:"NOMINE"; display:block; color:white; font-size:12px; position:relative; top:35px; left:-30px; z-index:10; transform:rotate(-35deg); text-align:center; background:#d54f58; } div.portrait-gagnants { display:inline-block; float:left; position:relative; overflow: hidden; padding:0; margin:15px 0 0 0; z-index:2; } div.portrait-gagnants-edition { display:inline-block; float:left; position:relative; overflow: hidden; padding:0; margin:15px 0 0 16px; z-index:2; width:47%; } div.portrait-onglet-gagnant { display:inline-block; float:left; position:relative; overflow: hidden; padding:0; margin:15px 0 0 10px; z-index:2; } .describe-winner { float: right; margin: 0; width: 49%; } .describe-winner-jury { float: right; margin: 0; width: 67%; } .describe-winner-jury p{ margin-bottom: 0px; } .describe-last-winner { float: right; margin: 0; } .separator-winner { z-index:1; position:relative; top: 115px; border-bottom: 2px solid #1fb8d6; } .separator-winner-experiment { position:relative; top: 115px; border-bottom: 2px solid #d54f58; } .block-think {height: 544px;} .titre-think{text-align: center; background-color: #1fb8d6; line-height: 49px; color: white; background-image: url("/student-sub/wp-content/themes/catch-box/img/think-img.png"); background-repeat: no-repeat; background-position: right center; font-size: 2em; font-family: 'Lato'; font-style: normal; font-weight: 700; } .titre-code{text-align: center; background-color: #f09c23;; line-height: 49px; color: white; background-image: url("/student-sub/wp-content/themes/catch-box/img/code-img.png"); background-repeat: no-repeat; background-position: right center; font-size: 2em; font-family: 'Lato'; font-style: normal; font-weight: 700; } .titre-experiment{text-align: center; background-color: #52a8d9; line-height: 49px; color: white; background-image: url("/student-sub/wp-content/themes/catch-box/img/experiment-img.png"); background-repeat: no-repeat; background-position: right center; font-size: 2em; font-family: 'Lato'; font-style: normal; font-weight: 700; } .block-think-edition {height: 260px; width:560px;background-color: #f2f2f2;} .block-code-edition {height: 260px; width:560px;background-color: #f2f2f2;margin-top: 30px;} .block-think-edition-gagne { display: inline-block; height: 260px; width:47%;background-color: #f2f2f2;} .block-code-edition-gagne { display: inline-block; height: 260px; width:47%;background-color: #f2f2f2; margin-left: 29px;} .firstname-jury { font-size: 2.5em; font-family: 'Lato'; font-style: italic; font-weight: 700; margin-bottom: 0px; } .secondname-jury { font-size: 2em; font-family: 'Lato'; font-style: italic; font-weight: 400; margin-bottom: 0px; } .twitter-jury { font-size: 1em; font-family: 'Lato'; font-style: normal; font-weight: 400; margin-top: 10px; padding-left: 20px; background-image: url("/student-sub/wp-content/themes/catch-box/img/jury/twitter.jpg"); background-repeat: no-repeat; background-position: left center; } .twitter-jury a { text-decoration: none; color:#77777b; } .all-jury { width : 100%; } .membre-jury { width : 530px; height: 200px; display: block; margin-bottom: 30px; } div.portrait-gagnants.theo {margin-top:4px;} @media (max-width:990px){ .main .autogrid3 .block div.win-wrapper {width:125px;position:relative;left:50%;margin-left:-62px;} .main .autogrid3 .block div.describe-winner {width:100%;} .separator-winner {top:265px;} .main .autogrid3 .block div.public-choice {top:360px;} .main .autogrid3 .block div.public-choice p {font-size:12px;} .separator-winner-experiment {top:265px;} div.portrait-gagnants.theo {margin-top:-4px;} } @media (max-width: 650px) { .block { width: 100%; } .block:last-child {width: 104%;} .main .autogrid3 .block div.win-wrapper { width: 164px; position: relative; left: 45%; margin-left: -57px; } .gagnant-experiment img {width: 150%;} .main .autogrid3 .block div.describe-winner { width: 100%; padding-left: 30px; } .gagnant-experiment img {width: 150%;} .main .autogrid3 .block div.test { width: 100%; padding-left: 30px; } .test p { width: 100%; } .test p:nth-child(1) { font-size: 20px; margin-top: -20px; width: 100%; } .test p:nth-child(2) { margin-top: -26px; font-size: 20px; padding-left: 0; } .test p:nth-child(4) { margin-top: -10px; width: 80%; text-align: left; } .portrait-exp { width: 45%; } .portrait-exp2 { top: -105px; width: 50%; margin-left: 80px; } .separator-winner-experiment { display: none; } div.portrait-code, div.portrait-think { width: 100%; padding-left: 0; } div.portrait-code, div.portrait-think-edition { width: 50%; padding-left: 0; } .main .autogrid3 .block div.portrait-code div.describe-winner, .main .autogrid3 .block div.portrait-think div.describe-winner { padding-left: 30px; } .main .autogrid3 .block .adrien {padding-left: 0;} .main .autogrid3 .block div.gagnant img, .main .autogrid3 .block div.gagnant-code img, .main .autogrid3 .block div.nomine img, .main .autogrid3 .block div.nomine-vert img, .main .autogrid3 .block div.nomine-bleu img { position: relative; width: 100%; } .main .autogrid3 .block div.win-wrapper { margin-left: -76px; } div.gagnant::before { top: 45px; left: -30px; } .main .autogrid3 .block div.public-choice { margin-top: 50px; } .separator-winner { top: 333px; display: none; } div.portrait-gagnants { margin-top: 0; } .main .autogrid3 .exp-block {height: 590px;} .main .autogrid3 .block div.portrait-code div.describe-winner p {font-size: 20px;} .firstname-winner {font-size: 20px;} .secondname-winner {font-size: 20px;} .main .autogrid3 .block .arianne {margin-top: -125px;} .main .autogrid3 .block .portrait-exp {margin-left: 16px;} .main .autogrid3 .exp-block { height: 950px; } div.portrait-gagnants { float: initial; overflow: visible; } } /*----------------Formulaire----------------*/ .form{ font-family: Dosis_regular; } @media (max-width: 992px) { .block-think, .exp-block, .block-code {height: 866px;} .main .autogrid3 .block div.public-choice { top: 343px; } div.portrait-gagnants.theo { margin-top: 20px; } } @media (max-width: 585px) { .main .autogrid3 .block div.public-choice { top: 320px; } .main .autogrid3 .block div.describe-winner .adrien { width: 100%; padding-left: 0; } } @media (min-width: 485px) and (max-width: 587px) { .main .autogrid3 .block div.describe-winner .arianne { width: 100%; padding-left: 30px; } } @media (min-width: 650px) { .firstname-winner {font-size: 30px;} .theo .firstname-winner {font-size: 27px;} .secondname-winner {font-size: 26px;} div.portrait-code { width: 100%; } } @media screen and (max-width: 560px) { div.portrait-gagnants.theo { margin-top: 0; } } @media screen and (max-width: 650px) { .block-think, .exp-block, .block-code { display: block !important; width: 100% !important; } div.portrait-code { width: 100%; } .portrait-exp { width: 100%; } .portrait-exp2 { width: 100%; } .main .autogrid3 .block { display: inline; } } @media (max-width: 410px) { .main .autogrid3 .block div.describe-winner a {font-size: 14px;} .main .autogrid3 .block div.describe-winner p {font-size: 16px;} .main .autogrid3 .block div.portrait-code div.describe-winner p { font-size: 16px; } div.portrait-gagnants.theo { margin-top: 33px; } .main .autogrid3 .block div.public-choice { top: 320px; } .main .autogrid3 .block div.public-choice p { font-size: 10px; } .separator-winner { top: 313px; display: none; } .main p { margin-bottom: 21px; line-height: 1.6; } .main .autogrid3 .block-think { height: 900px; width: auto; } .main .autogrid3 .block-code { height: 900px; display: block; width: auto; } .main .autogrid3 .exp-block { height: 900px; display: block; width: auto; float: left; } } @media screen and (max-width: 500px) { .gallery-block { background: #fff; position: relative; top: 20px; clear: both; border-bottom: none; height: 2500px; margin-bottom: 150px; } .gallery-block-edition { background: #fff; position: relative; clear: both; border-bottom: none; height: 2500px; margin-bottom: 150px; } .article-edition {display: block; width: 50%;} .grid2 > * { width:100%; } } .block-gallery { margin: 90px 0 50px 0; } .block-gallery img { width: 100%; } .gallery-block { background: #fff; position: relative; top: 50px; clear: both; border-bottom: 5px solid #33667b; height: 721px; margin-bottom: 100px; } .gallery-block-edition{ background: #fff; position: relative; clear: both; height: 721px; margin-bottom: 100px; } .gallery_mini img { width: 49.5%; padding: 3px 2px 0 0; } .gallery_mini2 img { width: 49.5%; padding: 5px 0 0 2px; } .gallery_mini_edition img { width: 49.5%; padding: 3px 2px 0 0; } .gallery_mini2_edition img { width: 32.8%; padding: 5px 0 0 2px; } /*------------ Title image -------------*/ .left_gallery { width: 50%; /*width: 530px;*/ float: left; background: #fff; } .gallery-edition { width: 100%; /*width: 530px;*/ float: left; background: #fff; } .right_gallery { width: 50%; float: right; background: #fff; padding-left: 2px; } .video-student { width: 100%; height: 280px; padding-left: 3px; } @media screen and (max-width: 740px) { .gallery-block { background: #fff; position: relative; top: 20px; clear: both; border-bottom: 5px solid #33667b; height: 1650px; /* height: 800px;*/ margin-bottom: 150px; } .left_gallery { float: none; width: 100%; background: #fff; } .right_gallery { float: none; width: 100%; background: #fff; padding-left: 2px; margin-top: 20px; } } @media screen and (max-width: 600px) { .gallery-block { background: #fff; position: relative; top: 20px; clear: both; border-bottom: none; height: 1450px; margin-bottom: 150px; } } @media screen and (max-width: 400px) { .gallery_mini img { width: 100%; padding: 3px 2px 0 0; } .gallery_mini2 img { width: 100%; padding: 3px 0 0 2px; } .gallery_mini_edition img { width: 100%; padding: 3px 2px 0 0; } .gallery_mini2_edition img { width: 100%; padding: 3px 0 0 2px; } .gallery-block { background: #fff; position: relative; top: 20px; clear: both; border-bottom: none; height: 2500px; margin-bottom: 150px; } } @media (max-width: 1024px) { .main{ padding: 0 30px 0px;} } @media (max-width: 960px) { #footer p a {color: white;font-size: 1.5rem;text-decoration: none;} }