template.css 53 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935
  1. @charset "UTF-8";
  2. @import url(//fonts.googleapis.com/css?family=Montserrat:400|Raleway:300,400,600|Inconsolata);
  3. #header #logo h3, #header #navbar .panel-activation, #footer p {
  4. position: relative;
  5. top: 50%;
  6. -webkit-transform: translateY(-50%);
  7. -moz-transform: translateY(-50%);
  8. -o-transform: translateY(-50%);
  9. -ms-transform: translateY(-50%);
  10. transform: translateY(-50%); }
  11. .button, .button-secondary {
  12. display: inline-block;
  13. padding: 7px 20px; }
  14. .button-small.button, .button-small.button-secondary {
  15. padding: 3px 10px;
  16. font-size: 0.9rem; }
  17. html, body {
  18. height: 100%; }
  19. body {
  20. background: #fff;
  21. color: #000;
  22. -webkit-font-smoothing: antialiased;
  23. -moz-osx-font-smoothing: grayscale; }
  24. a {
  25. color: #000; }
  26. a:hover {
  27. color: black; }
  28. b, strong, label, th {
  29. font-weight: 700; }
  30. #container {
  31. min-height: 100%;
  32. position: relative; }
  33. .fullwidth #body {
  34. padding-left: 0;
  35. padding-right: 0; }
  36. #body {
  37. background: #fff;
  38. padding-top: 5rem;
  39. padding-bottom: 0; }
  40. .left {
  41. float: left; }
  42. .right {
  43. float: right; }
  44. .default-animation, #body, #header, #header #logo h3, #header #navbar ul.navigation, #header.scrolled img, .modular .showcase .button {
  45. -webkit-transition: all 0.5s ease-in-out;
  46. -moz-transition: all 0.5s ease-in-out;
  47. transition: all 0.5s ease-in-out; }
  48. .padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer {
  49. padding-left: 7rem;
  50. padding-right: 7rem; }
  51. @media only all and (max-width: 59.938em) {
  52. .padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer {
  53. padding-left: 4rem;
  54. padding-right: 4rem; } }
  55. @media only all and (max-width: 47.938em) {
  56. .padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer {
  57. padding-left: 1rem;
  58. padding-right: 1rem; } }
  59. .padding-vert {
  60. padding-top: 3rem;
  61. padding-bottom: 3rem; }
  62. #header {
  63. position: fixed;
  64. z-index: 10;
  65. width: 100%;
  66. height: 5rem;
  67. background-color: white;
  68. box-shadow: 0 0.05rem 1rem rgba(0, 0, 0, 0.15); }
  69. #header #logo img {
  70. display: flex;
  71. flex-direction: row;
  72. flex-flow: row; }
  73. #header.scrolled {
  74. height: 3rem;
  75. background-color: rgba(255, 255, 255, 0.9) !important;
  76. box-shadow: 0 0.05rem 1rem rgba(0, 0, 0, 0.15) !important; }
  77. #header.scrolled #logo h3 {
  78. color: #000 !important;
  79. font-size: 1.6rem !important; }
  80. #header.scrolled #logo a, #header.scrolled #navbar span {
  81. color: #000 !important; }
  82. #header.scrolled #navbar a {
  83. color: #000 !important; }
  84. #header.scrolled #navbar a:hover {
  85. color: black !important; }
  86. #header.scrolled #navbar a:before, #header.scrolled #navbar a:after {
  87. background-color: #000 !important; }
  88. #header.scrolled .navigation {
  89. margin-top: 0.5rem !important; }
  90. #header > .grid, #header #logo, #header #navbar {
  91. height: 100%; }
  92. #header #logo {
  93. float: left; }
  94. #header #logo h3 {
  95. font-size: 2rem;
  96. line-height: 2rem;
  97. margin: 0; }
  98. #header #logo h3 a {
  99. color: #000; }
  100. #header #navbar {
  101. font-size: 1.4rem;
  102. /* Child Indicator */ }
  103. #header #navbar .has-children > a > span {
  104. display: inline-block;
  105. padding-right: 8px; }
  106. #header #navbar .has-children > a > span:after {
  107. font-family: FontAwesome;
  108. content: '\f107';
  109. position: absolute;
  110. display: inline-block;
  111. right: 8px;
  112. top: 4px; }
  113. #header #navbar .has-children > a:after, #header #navbar .has-children > a:before {
  114. display: none; }
  115. #header #navbar .has-children .has-children > a > span:after {
  116. content: '\f105'; }
  117. #header #navbar .navigation > .has-children:hover > a {
  118. background: #f6f6f6;
  119. border: 1px solid #ececec;
  120. border-bottom-color: #f6f6f6;
  121. margin: -1px -1px 0 -1px;
  122. z-index: 1000;
  123. position: relative;
  124. padding-bottom: 1px; }
  125. #header #navbar ul {
  126. margin: 0;
  127. padding: 0;
  128. list-style: none;
  129. text-transform: uppercase; }
  130. #header #navbar ul.navigation {
  131. display: inline-block;
  132. float: right;
  133. margin-top: 1.4rem; }
  134. #header #navbar ul.navigation li {
  135. float: left;
  136. position: relative;
  137. /*Active dropdown nav item */
  138. /* Dropdown CSS */
  139. /* Active on Hover */ }
  140. #header #navbar ul.navigation li a {
  141. font-family: "Sarabun", sans-serif;
  142. display: inline-block;
  143. padding: 0.3rem 0.8rem;
  144. -webkit-backface-visibility: hidden; }
  145. #header #navbar ul.navigation li a:hover:before {
  146. visibility: visible;
  147. -webkit-transform: scaleX(0.75);
  148. -moz-transform: scaleX(0.75);
  149. -ms-transform: scaleX(0.75);
  150. -o-transform: scaleX(0.75);
  151. transform: scaleX(0.75); }
  152. #header #navbar ul.navigation li a.active:after {
  153. top: 0;
  154. visibility: visible;
  155. -webkit-transform: scaleX(0.75);
  156. -moz-transform: scaleX(0.75);
  157. -ms-transform: scaleX(0.75);
  158. -o-transform: scaleX(0.75);
  159. transform: scaleX(0.75); }
  160. #header #navbar ul.navigation li.active a:after {
  161. top: 0;
  162. visibility: visible;
  163. -webkit-transform: scaleX(0.75);
  164. -moz-transform: scaleX(0.75);
  165. -ms-transform: scaleX(0.75);
  166. -o-transform: scaleX(0.75);
  167. transform: scaleX(0.75); }
  168. #header #navbar ul.navigation li ul {
  169. position: absolute;
  170. background-color: #f6f6f6;
  171. border: 1px solid #ececec;
  172. border-top: 0;
  173. min-width: 12rem;
  174. text-align: left;
  175. z-index: 999;
  176. left: -1px;
  177. display: none; }
  178. #header #navbar ul.navigation li ul li {
  179. display: block;
  180. float: none;
  181. /* Active Dropdown nav item */ }
  182. #header #navbar ul.navigation li ul li.active > a {
  183. background-color: #ececec;
  184. color: #000; }
  185. #header #navbar ul.navigation li ul li:hover > a {
  186. background-color: #000;
  187. color: #fff; }
  188. #header #navbar ul.navigation li ul li a {
  189. display: block;
  190. margin: 0 -1px; }
  191. #header #navbar ul.navigation li ul li a:after, #header #navbar ul.navigation li ul li a:before {
  192. display: none; }
  193. #header #navbar ul.navigation li ul ul {
  194. left: 100%;
  195. top: 0px; }
  196. #header #navbar ul.navigation li:hover > ul {
  197. display: block; }
  198. @media only all and (max-width: 59.938em) {
  199. #header #navbar ul.navigation {
  200. display: none; } }
  201. #header #navbar .panel-activation {
  202. padding: 1rem;
  203. display: none;
  204. font-size: 1.8rem;
  205. cursor: pointer;
  206. float: right; }
  207. @media only all and (max-width: 59.938em) {
  208. #header #navbar .panel-activation {
  209. display: inline-block; } }
  210. .header-image.fullwidth #body {
  211. padding-left: 0;
  212. padding-right: 0; }
  213. .header-image.fullwidth #body > .listing-row {
  214. padding-left: 7rem;
  215. padding-right: 7rem; }
  216. .header-image .listing-row:last-child {
  217. margin-bottom: 2rem; }
  218. .header-image #body .flush-top {
  219. margin-top: -9.5rem;
  220. padding-top: 9rem; }
  221. .header-image #breadcrumbs {
  222. margin-top: 1rem; }
  223. .header-image #header {
  224. background-color: rgba(255, 255, 255, 0);
  225. box-shadow: none; }
  226. .header-image #header .navigation .has-children:hover a {
  227. color: #000; }
  228. .header-image #header #logo h3, .header-image #header #logo a {
  229. color: #FFFFFF; }
  230. .header-image #header a, .header-image #header .menu-btn {
  231. color: #FFFFFF; }
  232. .header-image #header a:before, .header-image #header a:after {
  233. background-color: rgba(255, 255, 255, 0.7) !important; }
  234. #footer {
  235. position: absolute;
  236. background: #333;
  237. height: 6rem;
  238. right: 0;
  239. bottom: 0;
  240. left: 0;
  241. color: #999;
  242. text-align: center; }
  243. #footer a:hover {
  244. color: #fff; }
  245. #footer .totop {
  246. position: absolute;
  247. bottom: 5rem;
  248. text-align: center;
  249. left: 0;
  250. right: 0; }
  251. #footer .totop span {
  252. font-size: 1.7rem;
  253. line-height: 2.5rem;
  254. background: #333;
  255. width: 3rem;
  256. height: 2rem;
  257. border-radius: 3px;
  258. display: inline-block;
  259. text-align: top; }
  260. #footer p {
  261. margin: 0; }
  262. #footer p .fa {
  263. color: #fff; }
  264. html, body, button, input, select, textarea, .pure-g, .pure-g [class*="pure-u"] {
  265. font-family: "Sarabun", sans-serif; }
  266. h1 {
  267. font-family: "Sarabun", sans-serif;
  268. font-weight: 800;
  269. text-rendering: optimizeLegibility;
  270. letter-spacing: -0px; }
  271. h2, h3, h5, h6 {
  272. font-family: "Sarabun", sans-serif; }
  273. h1 {
  274. font-size: 2.3rem; }
  275. @media only all and (max-width: 47.938em) {
  276. h1 {
  277. font-size: 2.5rem;
  278. line-height: 1.2;
  279. margin-bottom: 2.5rem; } }
  280. @media only all and (min-width: 48em) and (max-width: 59.938em) {
  281. h2 {
  282. font-size: 1.6rem; } }
  283. @media only all and (max-width: 47.938em) {
  284. h2 {
  285. font-size: 1.5rem; } }
  286. @media only all and (min-width: 48em) and (max-width: 59.938em) {
  287. h3 {
  288. font-size: 1.6rem; } }
  289. @media only all and (max-width: 47.938em) {
  290. h3 {
  291. font-size: 1.5rem; } }
  292. h4 {
  293. font-family: "Sarabun", sans-serif;
  294. font-weight: 800; }
  295. @media only all and (min-width: 48em) and (max-width: 59.938em) {
  296. h4 {
  297. font-size: 1.25rem; } }
  298. @media only all and (max-width: 47.938em) {
  299. h4 {
  300. font-size: 1.15rem; } }
  301. h1 {
  302. text-align: center;
  303. letter-spacing: -0px; }
  304. h2 {
  305. letter-spacing: -0px; }
  306. h3 {
  307. letter-spacing: -0px; }
  308. h1 + h2 {
  309. margin: -2rem 0 2rem 0;
  310. font-size: 1.2rem;
  311. line-height: 1.3;
  312. text-align: center;
  313. font-family: "Sarabun", sans-serif;
  314. font-weight: 100; }
  315. @media only all and (min-width: 48em) and (max-width: 59.938em) {
  316. h1 + h2 {
  317. font-size: 1.6rem; } }
  318. @media only all and (max-width: 47.938em) {
  319. h1 + h2 {
  320. font-size: 1.5rem; } }
  321. h2 + h3 {
  322. margin: 0.5rem 0 2rem 0;
  323. font-size: 2rem;
  324. line-height: 1;
  325. text-align: center;
  326. font-family: "Sarabun", sans-serif;
  327. font-weight: 300; }
  328. @media only all and (min-width: 48em) and (max-width: 59.938em) {
  329. h2 + h3 {
  330. font-size: 1.6rem; } }
  331. @media only all and (max-width: 47.938em) {
  332. h2 + h3 {
  333. font-size: 1.5rem; } }
  334. p {
  335. font-size: 1rem; }
  336. blockquote {
  337. border-left: 10px solid #F0F2F4; }
  338. blockquote p {
  339. font-size: 1.1rem;
  340. color: #999; }
  341. blockquote cite {
  342. display: block;
  343. text-align: right;
  344. color: #666;
  345. font-size: 1.2rem; }
  346. blockquote > blockquote > blockquote {
  347. margin: 0; }
  348. blockquote > blockquote > blockquote p {
  349. padding: 15px;
  350. display: block;
  351. font-size: 1rem;
  352. margin-top: 0rem;
  353. margin-bottom: 0rem; }
  354. blockquote > blockquote > blockquote > p {
  355. margin-left: -71px;
  356. border-left: 10px solid #F0AD4E;
  357. background: #FCF8F2;
  358. color: #df8a13; }
  359. blockquote > blockquote > blockquote > p a {
  360. color: #b06d0f; }
  361. blockquote > blockquote > blockquote > p a:hover {
  362. color: #f2b866; }
  363. blockquote > blockquote > blockquote > blockquote > p {
  364. margin-left: -94px;
  365. border-left: 10px solid #D9534F;
  366. background: #FDF7F7;
  367. color: #b52b27; }
  368. blockquote > blockquote > blockquote > blockquote > p a {
  369. color: #8b211e; }
  370. blockquote > blockquote > blockquote > blockquote > p a:hover {
  371. color: #de6764; }
  372. blockquote > blockquote > blockquote > blockquote > blockquote > p {
  373. margin-left: -118px;
  374. border-left: 10px solid #5BC0DE;
  375. background: #F4F8FA;
  376. color: #28a1c5; }
  377. blockquote > blockquote > blockquote > blockquote > blockquote > p a {
  378. color: #1f7e9a; }
  379. blockquote > blockquote > blockquote > blockquote > blockquote > p a:hover {
  380. color: #70c8e2; }
  381. blockquote > blockquote > blockquote > blockquote > blockquote > blockquote > p {
  382. margin-left: -142px;
  383. border-left: 10px solid #5CB85C;
  384. background: #F1F9F1;
  385. color: #3d8b3d; }
  386. blockquote > blockquote > blockquote > blockquote > blockquote > blockquote > p a {
  387. color: #2d672d; }
  388. blockquote > blockquote > blockquote > blockquote > blockquote > blockquote > p a:hover {
  389. color: #6ec06e; }
  390. code,
  391. kbd,
  392. pre,
  393. samp {
  394. font-family: "Inconsolata", monospace; }
  395. code {
  396. background: #f9f2f4;
  397. color: #9c1d3d; }
  398. pre {
  399. padding: 2rem;
  400. background: #f0f0f0;
  401. border: 1px solid #ddd;
  402. border-radius: 3px; }
  403. pre code {
  404. color: #237794;
  405. background: inherit; }
  406. hr {
  407. border-bottom: 4px solid #F0F2F4; }
  408. .page-title {
  409. margin-top: -25px;
  410. padding: 25px;
  411. float: left;
  412. clear: both;
  413. background: #000;
  414. color: #fff; }
  415. .label {
  416. vertical-align: middle;
  417. background: #000;
  418. border-radius: 100%;
  419. color: #fff;
  420. height: 1rem;
  421. min-width: 1rem;
  422. line-height: 1rem;
  423. display: inline-block;
  424. text-align: center;
  425. font-size: 0.7rem;
  426. font-family: "Sarabun", sans-serif;
  427. margin-right: 0.75rem; }
  428. fieldset {
  429. border: 1px solid #ddd; }
  430. textarea, input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], select[multiple=multiple] {
  431. background-color: white;
  432. border: 1px solid #ddd;
  433. box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); }
  434. textarea:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="url"]:hover, input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="month"]:hover, input[type="time"]:hover, input[type="week"]:hover, select[multiple=multiple]:hover {
  435. border-color: #c4c4c4; }
  436. textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, select[multiple=multiple]:focus {
  437. border-color: #000;
  438. box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(0, 0, 0, 0.7); }
  439. .form-field .required {
  440. color: #F3443F;
  441. font-size: 3rem;
  442. line-height: 3rem;
  443. vertical-align: top;
  444. height: 1.5rem;
  445. display: inline-block; }
  446. form .buttons {
  447. text-align: center; }
  448. form input {
  449. font-weight: 400; }
  450. table {
  451. border: 1px solid #eaeaea;
  452. table-layout: auto; }
  453. th {
  454. background: #f7f7f7;
  455. padding: 0.5rem; }
  456. td {
  457. padding: 0.5rem;
  458. border: 1px solid #eaeaea; }
  459. .button {
  460. background: #fff;
  461. color: #000;
  462. border: 1px solid #000; }
  463. .button:hover {
  464. background: #000;
  465. color: #fff; }
  466. .button:active {
  467. box-shadow: 0 1px 0 black; }
  468. .button-secondary {
  469. background: #fff;
  470. color: #F6635E;
  471. border: 1px solid #F6635E; }
  472. .button-secondary:hover {
  473. background: #F6635E;
  474. color: #fff; }
  475. .button-secondary:active {
  476. box-shadow: 0 1px 0 #f32b24; }
  477. .bullets {
  478. margin: 1.7em 0;
  479. margin-left: -0.85em;
  480. margin-right: -0.85em;
  481. overflow: auto; }
  482. .bullet {
  483. float: left;
  484. padding: 0 0.85em; }
  485. .two-column-bullet {
  486. width: 50%; }
  487. @media only all and (max-width: 47.938em) {
  488. .two-column-bullet {
  489. width: 100%; } }
  490. .three-column-bullet {
  491. width: 33.33333%; }
  492. @media only all and (max-width: 47.938em) {
  493. .three-column-bullet {
  494. width: 100%; } }
  495. .four-column-bullet {
  496. width: 25%; }
  497. @media only all and (max-width: 47.938em) {
  498. .four-column-bullet {
  499. width: 100%; } }
  500. .bullet-icon {
  501. float: left;
  502. background: #000;
  503. padding: 0.875rem;
  504. width: 3.5rem;
  505. height: 3.5rem;
  506. border-radius: 50%;
  507. color: #fff;
  508. font-size: 1.75rem;
  509. text-align: center; }
  510. .bullet-icon-1 {
  511. background: #000; }
  512. .bullet-icon-2 {
  513. background: black; }
  514. .bullet-icon-3 {
  515. background: black; }
  516. .bullet-content {
  517. margin-left: 4.55rem; }
  518. .sb-slidebar {
  519. background-color: #333 !important; }
  520. #panel {
  521. padding-top: 1rem;
  522. color: #ddd; }
  523. #panel .navigation {
  524. list-style: none;
  525. padding: 0; }
  526. #panel .navigation li {
  527. border-bottom: 1px solid #3d3d3d; }
  528. #panel .navigation li a {
  529. color: #ddd;
  530. display: block;
  531. padding: 0.5rem 1rem;
  532. font-weight: 600; }
  533. #panel .navigation li a:hover {
  534. color: white;
  535. background-color: #262626; }
  536. #panel .navigation li a:last-child {
  537. border-bottom: 0; }
  538. #panel .navigation li.active > a {
  539. background: #fff;
  540. color: #000; }
  541. #panel .navigation li.active > a:hover {
  542. color: #000; }
  543. #panel .navigation li:first-child {
  544. border-top: 1px solid #3d3d3d; }
  545. #panel .navigation li ul {
  546. list-style: none;
  547. padding: 0; }
  548. #panel .navigation li ul li {
  549. border: 0 !important; }
  550. #panel .navigation li ul li a {
  551. color: #c4c4c4;
  552. padding: 0.2rem 1rem 0.2rem 2rem;
  553. font-size: 0.9rem; }
  554. #panel .navigation li ul li li a {
  555. padding-left: 3rem; }
  556. #panel .navigation li ul li li a li a {
  557. padding-left: 4rem; }
  558. #panel .navigation li ul li.active > a {
  559. background: #ccc; }
  560. .blog-header {
  561. padding-top: 2rem;
  562. padding-bottom: 2rem; }
  563. .blog-header.blog-header-image {
  564. background-size: cover;
  565. background-position: center; }
  566. .blog-header.blog-header-image h1, .blog-header.blog-header-image h2 {
  567. color: #FFFFFF; }
  568. .blog-header h1 {
  569. font-size: 4rem;
  570. margin-top: 0; }
  571. @media only all and (min-width: 48em) and (max-width: 59.938em) {
  572. .blog-header h1 {
  573. font-size: 3rem; } }
  574. @media only all and (max-width: 47.938em) {
  575. .blog-header h1 {
  576. font-size: 2.5rem;
  577. line-height: 1.2;
  578. margin-bottom: 2.5rem; } }
  579. .blog-header + .blog-content {
  580. padding-top: 3rem; }
  581. .list-item {
  582. border-bottom: 1px solid #EEEEEE;
  583. margin-bottom: 3rem; }
  584. .list-item:last-child {
  585. border-bottom: 0; }
  586. .list-item .list-blog-header {
  587. position: relative; }
  588. .list-item .list-blog-header h4 {
  589. margin-bottom: 0.5rem; }
  590. .list-item .list-blog-header h4 a {
  591. color: #000; }
  592. .list-item .list-blog-header h4 a:hover {
  593. color: #000; }
  594. .list-item .list-blog-header img {
  595. display: block;
  596. margin-top: 1rem;
  597. border-radius: 3px; }
  598. .list-item .list-blog-date {
  599. float: right;
  600. text-align: center; }
  601. .list-item .list-blog-date span {
  602. display: block;
  603. font-size: 1.75rem;
  604. font-weight: 700;
  605. line-height: 110%; }
  606. .list-item .list-blog-date em {
  607. display: block;
  608. border-top: 1px solid #EEEEEE;
  609. font-style: normal;
  610. text-transform: uppercase; }
  611. .blog-content-item .list-blog-padding > p:nth-child(2) {
  612. font-size: 1.2rem; }
  613. .tags a {
  614. display: inline-block;
  615. font-size: 0.8rem;
  616. border: 1px solid #000;
  617. border-radius: 3px;
  618. padding: 0.1rem 0.4rem;
  619. margin-bottom: 0.2rem;
  620. text-transform: uppercase; }
  621. .archives, .related-pages {
  622. padding: 0;
  623. list-style: none; }
  624. .archives li, .related-pages li {
  625. border-bottom: 1px solid #EEEEEE;
  626. line-height: 2rem; }
  627. .archives li:last-child, .related-pages li:last-child {
  628. border-bottom: 0; }
  629. .related-pages li a {
  630. display: block; }
  631. .related-pages .score {
  632. display: block;
  633. float: right;
  634. color: #999;
  635. font-size: 85%; }
  636. .syndicate a {
  637. margin-bottom: 1rem; }
  638. div#breadcrumbs {
  639. padding-left: 0; }
  640. @media only all and (max-width: 47.938em) {
  641. div#breadcrumbs {
  642. display: none; } }
  643. #sidebar {
  644. padding-left: 3rem; }
  645. @media only all and (max-width: 47.938em) {
  646. #sidebar {
  647. padding-left: 0; } }
  648. #sidebar .sidebar-content {
  649. margin-bottom: 3rem; }
  650. #sidebar .sidebar-content h4 {
  651. margin-bottom: 1rem; }
  652. #sidebar .sidebar-content p, #sidebar .sidebar-content ul {
  653. margin-top: 1rem; }
  654. ul.pagination {
  655. margin: 0 0 3rem;
  656. text-align: center; }
  657. .prev-next {
  658. margin-top: 5rem;
  659. text-align: center; }
  660. #error {
  661. text-align: center;
  662. display: flex;
  663. align-items: center;
  664. justify-content: center;
  665. height: 100%;
  666. padding-bottom: 6rem; }
  667. #error h1 {
  668. font-size: 5rem; }
  669. #error p {
  670. margin: 1rem 0; }
  671. .simplesearch h1 {
  672. margin-bottom: 0; }
  673. .simplesearch .center {
  674. text-align: center; }
  675. .simplesearch input {
  676. display: inline-block;
  677. max-width: 30rem;
  678. font-size: 2rem; }
  679. .simplesearch .search-image {
  680. margin-top: 1rem; }
  681. .simplesearch .search-image img {
  682. border-radius: 4px; }
  683. @media only all and (max-width: 47.938em) {
  684. .simplesearch .search-image img {
  685. display: none; } }
  686. @media only all and (max-width: 47.938em) {
  687. .simplesearch .search-item {
  688. margin-left: 0; } }
  689. .simplesearch .search-wrapper .search-submit {
  690. height: 52px;
  691. padding: 0 10px; }
  692. .simplesearch .search-wrapper .search-submit img {
  693. width: 30px; }
  694. .simplesearch .search-details {
  695. float: right;
  696. margin-top: -2.5rem;
  697. font-weight: bold;
  698. font-size: 1rem;
  699. color: #333333; }
  700. @media only all and (max-width: 47.938em) {
  701. .simplesearch .search-details {
  702. float: none;
  703. margin-top: -0.2rem;
  704. margin-bottom: 1rem; } }
  705. .simplesearch hr {
  706. border-bottom: 1px solid #eee; }
  707. .grav-lightslider .lSSlideOuter .lSPager.lSpg > li a {
  708. z-index: 1; }
  709. .padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer {
  710. padding-left: 3rem;
  711. padding-right: 3rem; }
  712. #body > script:first-child + .grav-lightslider {
  713. margin-top: -3rem; }
  714. #sb-site {
  715. background: none !important; }
  716. #sb-site #body {
  717. background: none !important;
  718. font-family: "Sarabun", sans-serif !important; }
  719. #sb-site #body p:empty {
  720. display: none; }
  721. @media (max-width: 442px) {
  722. #sb-site #body {
  723. padding-top: 2rem; } }
  724. body#top.modular.fullwidth.title-center.title-h1h2 {
  725. overflow-y: hidden; }
  726. #header.scrolled {
  727. padding-left: 2rem;
  728. padding-right: 2rem; }
  729. #header.scrolled img {
  730. -webkit-transform: scale(0.75);
  731. -moz-transform: scale(0.75);
  732. -ms-transform: scale(0.75);
  733. -o-transform: scale(0.75);
  734. transform: scale(0.75);
  735. padding-bottom: 1rem; }
  736. #header #navbar ul.navigation li a {
  737. font-family: "Sarabun", sans-serif;
  738. font-weight: 400;
  739. text-transform: uppercase;
  740. font-size: 1rem;
  741. display: inline-block;
  742. padding: 0.3rem 0.8rem;
  743. -webkit-backface-visibility: hidden; }
  744. #header #navbar ul.navigation li:after {
  745. display: inline;
  746. content: "|";
  747. padding: 0 .1em;
  748. vertical-align: top; }
  749. #header #navbar ul.navigation li:last-child:after {
  750. content: "" !important; }
  751. #header #navbar ul.navigation li a:hover {
  752. font-weight: 900; }
  753. #logo {
  754. position: relative;
  755. display: flex;
  756. flex-direction: row; }
  757. #logo img {
  758. padding: 0.75rem;
  759. height: 4rem;
  760. margin: auto; }
  761. @media (max-width: 442px) {
  762. #logo img {
  763. height: 3rem; } }
  764. @media (max-width: 1024px) {
  765. #logo img {
  766. height: 3.5rem; } }
  767. #logo img #gouv {
  768. padding-left: 1rem;
  769. padding-right: 2rem;
  770. padding: 0.5rem;
  771. min-height: 4rem; }
  772. @media (max-width: 442px) {
  773. #header #navbar {
  774. position: absolute;
  775. right: 1rem; }
  776. .padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer {
  777. padding-left: 0 !important;
  778. padding-right: 0rem !important; }
  779. #header #logo {
  780. position: absolute; }
  781. #logo img {
  782. height: 3rem;
  783. margin-left: 1rem; } }
  784. @media (max-width: 1024px) {
  785. .padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer {
  786. padding-left: 0 !important;
  787. padding-right: 0rem !important; }
  788. #header #navbar {
  789. padding-right: 2rem; } }
  790. .parallax-window {
  791. background: transparent;
  792. width: 100%; }
  793. .parallax-mirror {
  794. top: -80px; }
  795. .callout {
  796. filter: opacity(0.75);
  797. position: relative;
  798. z-index: 1;
  799. padding-top: 0.5rem;
  800. padding-right: 0rem !important;
  801. padding-left: 0rem !important; }
  802. .callout h1, .callout h2, .callout h3, .callout p {
  803. text-align: left !important; }
  804. .callout h2 {
  805. text-transform: capitalize;
  806. font-weight: 300;
  807. font-size: 1rem; }
  808. .ressources {
  809. background-color: white;
  810. padding-top: 1rem; }
  811. .titre_nsb {
  812. display: block;
  813. margin-right: 45%; }
  814. .titre_nsb h1 {
  815. margin-bottom: 0rem !important;
  816. text-align: right;
  817. padding-right: 0rem !important;
  818. padding-left: 2rem; }
  819. @media (max-width: 500px) {
  820. .titre_nsb {
  821. margin-right: 30% !important; }
  822. .titre_nsb h1 {
  823. font-size: 1.6rem; } }
  824. .titre_bsn {
  825. display: block;
  826. margin-left: 45%; }
  827. .titre_bsn h1 {
  828. text-align: left;
  829. margin-bottom: 0rem !important; }
  830. .titre_bsn p {
  831. padding-right: 15%; }
  832. .titre_bsn .chapeau {
  833. text-transform: uppercase; }
  834. @media (max-width: 442px) {
  835. .titre_bsn {
  836. margin-left: 30%; }
  837. .titre_bsn h1 {
  838. font-size: 1.6rem; } }
  839. @keyframes animate {
  840. 0% {
  841. width: 0%; }
  842. 100% {
  843. width: 100%; } }
  844. @keyframes glissement {
  845. from {
  846. margin-left: 100%;
  847. width: 300%; }
  848. to {
  849. margin-left: 0%;
  850. width: 100%; } }
  851. .after-h1 .in-view-right {
  852. animation: animate 1.2s 1 normal ease-in-out forwards; }
  853. .after-h1 .in-view {
  854. animation: glissement 1.2s 1 normal ease-in-out forwards; }
  855. .programmes {
  856. justify-content: center;
  857. padding-left: 5%;
  858. padding-right: 5%;
  859. padding-top: 8rem;
  860. padding-bottom: 8rem; }
  861. .programmes .slick-list {
  862. width: 70%;
  863. margin: auto;
  864. padding: 0px 150px !important; }
  865. .programmes .slick-list .slick-slide {
  866. width: min-content; }
  867. .programme {
  868. z-index: 1;
  869. max-width: 35%;
  870. min-width: 26rem;
  871. padding: 1.5rem;
  872. background-color: white;
  873. margin: 0.4rem; }
  874. .programme h4 {
  875. text-transform: uppercase;
  876. line-height: 1.2; }
  877. .programme img {
  878. max-height: 4rem; }
  879. .programme p {
  880. font-family: "Sarabun", sans-serif;
  881. font-weight: 500;
  882. font-style: italic;
  883. padding-bottom: 1.5rem; }
  884. @media (max-width: 442px) {
  885. .programme {
  886. min-width: 20rem; } }
  887. /*CSS pour afficher/masquer un texte via un bouton*/
  888. /*Style du module TEXTE*/
  889. .texte-cache-raisondetre {
  890. position: relative;
  891. max-height: 200px;
  892. /*Hauteur du texte visible avant le clic*/
  893. overflow: hidden;
  894. /*On cache tout ce qui dépasse des 400px*/
  895. transition: max-height 1s ease;
  896. /* Transition CSS entre l'ouverture et la fermeture*/ }
  897. @media (max-width: 1024px) {
  898. .texte-cache-raisondetre {
  899. max-height: 200px; } }
  900. @media (max-width: 442px) {
  901. .texte-cache-raisondetre {
  902. max-height: 200px; } }
  903. /*Style du module TEXTE lorsqu'il est ouvert*/
  904. .texte-cache-raisondetre.ouvert {
  905. max-height: 300vh;
  906. /* On lui définit une hauteur max de tout l'écran si nécessaire pour qu'il affiche tout son contenu*/ }
  907. /*On stylise l'effet de flou lorsque le module TEXTE est fermé, donc il n'a pas la classe "ouvert"*/
  908. .texte-cache-raisondetre:not(.ouvert)::after {
  909. content: '';
  910. position: absolute;
  911. top: 400px;
  912. bottom: 0;
  913. left: 0;
  914. right: 0; }
  915. .bouton-raisondetre {
  916. position: relative;
  917. justify-content: center;
  918. cursor: pointer;
  919. border: solid;
  920. border-radius: 0px !important;
  921. background-color: transparent;
  922. text-transform: uppercase;
  923. left: 45%;
  924. margin-bottom: 2rem !important; }
  925. @media (max-width: 442px) {
  926. .bouton-raisondetre {
  927. left: 0%; } }
  928. /*CSS pour afficher/masquer un texte via un bouton*/
  929. /*Style du module TEXTE*/
  930. .texte-cache {
  931. position: relative;
  932. max-height: 400px;
  933. /*Hauteur du texte visible avant le clic*/
  934. overflow: hidden;
  935. /*On cache tout ce qui dépasse des 400px*/
  936. transition: max-height 1s ease;
  937. /* Transition CSS entre l'ouverture et la fermeture*/ }
  938. @media (max-width: 1024px) {
  939. .texte-cache {
  940. max-height: 445px; } }
  941. @media (max-width: 442px) {
  942. .texte-cache {
  943. max-height: 400px; } }
  944. /*Style du module TEXTE lorsqu'il est ouvert*/
  945. .texte-cache.ouvert {
  946. max-height: 300vh;
  947. /* On lui définit une hauteur max de tout l'écran si nécessaire pour qu'il affiche tout son contenu*/ }
  948. /*On stylise l'effet de flou lorsque le module TEXTE est fermé, donc il n'a pas la classe "ouvert"*/
  949. .texte-cache:not(.ouvert)::after {
  950. content: '';
  951. position: absolute;
  952. top: 400px;
  953. bottom: 0;
  954. left: 0;
  955. right: 0; }
  956. @media (max-width: 1024px) {
  957. .modular .features {
  958. width: 80% !important;
  959. margin: auto !important; } }
  960. @media (max-width: 442px) {
  961. .modular .features .feature {
  962. width: 80%; } }
  963. @media (max-width: 1024px) {
  964. .modular .features .feature {
  965. width: 24%; } }
  966. .bouton-ouverture {
  967. position: relative;
  968. justify-content: center;
  969. cursor: pointer;
  970. border: solid;
  971. border-radius: 0px !important;
  972. background-color: transparent;
  973. text-transform: uppercase;
  974. left: 45%;
  975. margin-bottom: 2rem !important; }
  976. .gouvernance {
  977. background-color: #000;
  978. color: #ffffff;
  979. text-transform: uppercase;
  980. padding-bottom: 6rem;
  981. padding-top: 2rem; }
  982. .mozaique_personnes {
  983. background-color: #d9d9d9;
  984. padding-bottom: 6rem; }
  985. .mozaique_personnes .equipe {
  986. display: flex !important;
  987. flex-direction: row;
  988. flex-wrap: wrap;
  989. width: 100%;
  990. padding-left: 22%;
  991. padding-right: 15%;
  992. margin: auto;
  993. justify-items: center; }
  994. @media (max-width: 442px) {
  995. .mozaique_personnes .equipe {
  996. width: 100%;
  997. padding-left: 3%;
  998. padding-right: 2%; } }
  999. .mozaique_personnes .equipe h3 {
  1000. padding-top: 3rem;
  1001. min-width: 100%;
  1002. font-family: "Sarabun", sans-serif;
  1003. font-weight: 800;
  1004. font-size: 1rem;
  1005. line-height: 20px;
  1006. text-align: left; }
  1007. @media (max-width: 442px) {
  1008. .mozaique_personnes .equipe h3 {
  1009. font-size: 0.9rem;
  1010. padding-right: 0.5rem; } }
  1011. .mozaique_personnes .equipe .personne {
  1012. display: flex;
  1013. flex-direction: row;
  1014. flex-wrap: wrap;
  1015. padding-right: 0.5rem;
  1016. padding-bottom: 0.5rem; }
  1017. .mozaique_personnes .equipe .personne .mozaique {
  1018. display: flex;
  1019. flex-direction: row;
  1020. justify-content: flex-end;
  1021. max-width: 30rem;
  1022. min-width: 30rem; }
  1023. @media (max-width: 442px) {
  1024. .mozaique_personnes .equipe .personne .mozaique {
  1025. max-width: 21rem;
  1026. min-width: 21rem; } }
  1027. .mozaique_personnes .equipe .personne .mozaique .photo {
  1028. overflow: hidden;
  1029. width: 15rem !important;
  1030. height: 15rem !important; }
  1031. .mozaique_personnes .equipe .personne .mozaique .photo img {
  1032. object-fit: cover;
  1033. width: 100%;
  1034. height: 100%; }
  1035. .mozaique_personnes .equipe .personne .mozaique .info {
  1036. background-color: #fff;
  1037. display: flex;
  1038. flex-direction: column;
  1039. font-family: "Sarabun", sans-serif;
  1040. width: 50%;
  1041. height: 15rem;
  1042. min-width: 15rem; }
  1043. @media (max-width: 442px) {
  1044. .mozaique_personnes .equipe .personne .mozaique .info {
  1045. max-width: 11rem;
  1046. min-width: 11rem; } }
  1047. .mozaique_personnes .equipe .personne .mozaique .info h5 {
  1048. font-weight: 900;
  1049. font-size: 1.1rem;
  1050. margin: 0;
  1051. padding-top: 0.8rem;
  1052. padding-right: 1rem;
  1053. padding-left: 1.3rem; }
  1054. @media (max-width: 442px) {
  1055. .mozaique_personnes .equipe .personne .mozaique .info h5 {
  1056. font-size: 0.9rem;
  1057. padding-left: 0.8rem;
  1058. padding-right: 0.6rem; } }
  1059. .mozaique_personnes .equipe .personne .mozaique .info h6 {
  1060. font-weight: 300;
  1061. font-size: 0.9rem;
  1062. font-style: italic;
  1063. line-height: 1.3;
  1064. margin: 0;
  1065. padding-right: 1.2rem;
  1066. padding-left: 1.3rem; }
  1067. @media (max-width: 442px) {
  1068. .mozaique_personnes .equipe .personne .mozaique .info h6 {
  1069. padding-left: 0.8rem;
  1070. font-size: 0.75rem;
  1071. padding-right: 0.6rem; } }
  1072. .mozaique_personnes .equipe .personne .mozaique .info:hover {
  1073. background-color: #000;
  1074. color: #fff;
  1075. transition: 0.2s ease-in-out; }
  1076. .bouton {
  1077. border: solid !important;
  1078. background-color: transparent;
  1079. border-radius: 0px !important;
  1080. text-transform: uppercase;
  1081. align-self: flex-end;
  1082. margin: auto;
  1083. margin-bottom: 0.8rem !important;
  1084. font-size: 0.7rem; }
  1085. .modal {
  1086. position: fixed;
  1087. z-index: 1;
  1088. top: 0;
  1089. right: 0;
  1090. bottom: 0;
  1091. left: 0;
  1092. display: none; }
  1093. .modal.open {
  1094. display: block; }
  1095. .modal .container {
  1096. position: absolute;
  1097. background: white !important;
  1098. top: 50%;
  1099. left: 50%;
  1100. transform: translateX(-50%) translateY(-50%);
  1101. width: 50%;
  1102. height: content;
  1103. min-height: 50px;
  1104. border: solid;
  1105. color: black; }
  1106. .modal .container .message {
  1107. padding: 5% 10% 5% 5%; }
  1108. .modal .container a.close {
  1109. position: absolute;
  1110. right: 5%;
  1111. top: 5%;
  1112. color: black;
  1113. font-size: 30px; }
  1114. .modal .container a.close:hover {
  1115. color: black; }
  1116. @media (max-width: 442px) {
  1117. .modal .container {
  1118. transform: translateX(-50%) translateY(-50%);
  1119. width: 85%;
  1120. height: 80%;
  1121. overflow-y: scroll; }
  1122. .modal .container a.close {
  1123. font-size: 0.8rem;
  1124. position: absolute;
  1125. right: 2%;
  1126. top: 0.8%; }
  1127. .modal .container p {
  1128. font-size: 0.8rem;
  1129. margin-top: 0; }
  1130. .modal .container .message {
  1131. padding: 5% 5% 5% 5%; } }
  1132. @media (max-width: 1024px) {
  1133. .modal .container {
  1134. transform: translateX(-50%) translateY(-50%);
  1135. width: 75%;
  1136. height: 65%;
  1137. overflow-y: scroll; }
  1138. .modal .container a.close {
  1139. font-size: 0.8rem;
  1140. position: absolute;
  1141. right: 2%;
  1142. top: 0.8%; }
  1143. .modal .container p {
  1144. font-size: 0.8rem;
  1145. margin-top: 0; }
  1146. .modal .container .message {
  1147. padding: 5% 5% 5% 5%; } }
  1148. #new-footer {
  1149. display: flex;
  1150. flex-direction: column;
  1151. background-color: white;
  1152. padding-bottom: 3rem; }
  1153. #new-footer .tothetop {
  1154. position: relative;
  1155. height: 1rem;
  1156. bottom: 3rem;
  1157. text-align: center;
  1158. left: 0;
  1159. right: 0; }
  1160. #new-footer .tothetop span {
  1161. font-size: 1.7rem;
  1162. line-height: 2,5rem;
  1163. background: #fff;
  1164. width: 4rem;
  1165. height: 6rem;
  1166. border-radius: 3px;
  1167. display: inline-block;
  1168. text-align: top; }
  1169. #new-footer .footer {
  1170. display: flex;
  1171. flex-direction: row;
  1172. flex-wrap: nowrap; }
  1173. #new-footer .footer .footer-logos {
  1174. display: flex;
  1175. flex-direction: row;
  1176. width: 65%;
  1177. align-items: center;
  1178. justify-content: center; }
  1179. #new-footer .footer .footer-logos img {
  1180. max-height: 7rem;
  1181. padding-right: 2rem; }
  1182. #new-footer .footer .contact {
  1183. display: flex;
  1184. flex-direction: column;
  1185. min-width: 288px;
  1186. width: 35%;
  1187. padding-left: 1.5rem;
  1188. margin-right: 2rem;
  1189. margin-top: 1.5rem;
  1190. align-items: flex-start; }
  1191. #new-footer .footer .contact img {
  1192. margin-bottom: 1rem;
  1193. max-height: 2rem; }
  1194. #new-footer .footer .contact svg {
  1195. margin-bottom: 1rem; }
  1196. #new-footer .footer .contact h6 {
  1197. margin: 0 !important;
  1198. font-weight: 600; }
  1199. #new-footer .footer .contact p {
  1200. margin: 0; }
  1201. @media (max-width: 442px) {
  1202. #new-footer .footer {
  1203. width: 100%;
  1204. flex-direction: column-reverse;
  1205. align-items: center;
  1206. margin: auto; }
  1207. #new-footer .footer .contact {
  1208. padding-top: 1rem;
  1209. width: 80%; }
  1210. #new-footer .footer .footer-logos {
  1211. margin-top: 1.5rem;
  1212. margin-left: 0.5rem;
  1213. flex-direction: column;
  1214. justify-content: space-between; }
  1215. #new-footer .footer .footer-logos img {
  1216. padding: 0.5rem; } }
  1217. @media (max-width: 1024px) {
  1218. #new-footer .footer .contact img {
  1219. max-height: 1.5rem; }
  1220. #new-footer .footer .contact h6 {
  1221. font-size: 0.8rem; }
  1222. #new-footer .footer .contact p {
  1223. font-size: 0.8rem; }
  1224. #new-footer .footer .contact svg {
  1225. margin-bottom: 0.6rem; }
  1226. #new-footer .footer .footer-logos img {
  1227. padding: 0.5rem; } }
  1228. button:focus {
  1229. border: solid !important;
  1230. background-color: transparent;
  1231. border-radius: 0px !important;
  1232. text-transform: uppercase;
  1233. align-self: flex-end;
  1234. margin: auto;
  1235. outline: -webkit-focus-ring-color auto 0px;
  1236. outline-color: -webkit-focus-ring-color;
  1237. outline-style: auto;
  1238. outline-width: 0px; }
  1239. .event .callout {
  1240. filter: opacity(1); }
  1241. .event .callout h2 {
  1242. font-family: "Sarabun", sans-serif;
  1243. font-weight: 100 !important;
  1244. font-size: 1.8rem;
  1245. line-height: 1.2;
  1246. text-transform: uppercase;
  1247. margin: 0; }
  1248. .event .callout .titre_bsn {
  1249. position: relative; }
  1250. .event .callout .titre_bsn #explog {
  1251. position: absolute;
  1252. right: 105%;
  1253. top: 3%;
  1254. max-width: 20%; }
  1255. @media (max-width: 500px) {
  1256. .event .callout .titre_bsn #explog {
  1257. right: 110%;
  1258. top: 1%;
  1259. max-width: 50%; } }
  1260. @media (max-width: 442px) {
  1261. .event .callout .titre_bsn #explog {
  1262. right: 105%;
  1263. top: 3%;
  1264. max-width: 30%; } }
  1265. .event .callout .titre_bsn .text-titre-event h1 {
  1266. text-transform: uppercase;
  1267. line-height: 1 !important;
  1268. margin-bottom: 0.5rem !important; }
  1269. .event .callout .titre_bsn .text-titre-event .sous-titre {
  1270. margin-top: 1rem; }
  1271. h1 {
  1272. font-family: "Sarabun", sans-serif;
  1273. text-transform: uppercase;
  1274. line-height: 1 !important;
  1275. font-size: 2rem !important;
  1276. margin-bottom: 0.5rem !important; }
  1277. .presentation-event {
  1278. display: flex;
  1279. flex-direction: column;
  1280. margin: auto;
  1281. width: 60%;
  1282. height: auto;
  1283. background-color: white;
  1284. color: #000;
  1285. padding-top: 1.5rem;
  1286. padding-left: 2em;
  1287. padding-right: 2em;
  1288. margin-top: 6rem;
  1289. margin-bottom: 6rem;
  1290. text-align: left; }
  1291. .presentation-event p {
  1292. font-size: 1.2rem;
  1293. line-height: 1.5;
  1294. margin: 1rem; }
  1295. .presentation-event ul {
  1296. font-size: 1.2rem;
  1297. line-height: 1.5;
  1298. margin: 1rem; }
  1299. .presentation-event .boutons-event {
  1300. margin-top: 2rem;
  1301. margin-bottom: 2rem;
  1302. display: flex;
  1303. flex-direction: column; }
  1304. .presentation-event .boutons-event .bouton {
  1305. border: solid !important;
  1306. background-color: transparent;
  1307. border-radius: 0px !important;
  1308. text-transform: uppercase;
  1309. align-self: flex-end;
  1310. margin: auto;
  1311. margin-bottom: 0.8rem !important;
  1312. font-size: 0.7rem;
  1313. padding: 2px 10px; }
  1314. @media (max-width: 600px) {
  1315. .presentation-event {
  1316. margin-top: 1rem !important;
  1317. width: 80%;
  1318. padding-left: 1rem;
  1319. padding-right: 1rem;
  1320. padding-top: 1rem; }
  1321. .presentation-event p {
  1322. font-size: 1.1rem; }
  1323. .presentation-event ul {
  1324. font-size: 1.1rem; } }
  1325. .intervenant {
  1326. background-color: #d9d9d9;
  1327. color: #000;
  1328. text-transform: uppercase;
  1329. padding-bottom: 2rem;
  1330. padding-top: 2rem; }
  1331. .equipe-event {
  1332. display: flex !important;
  1333. flex-direction: row;
  1334. flex-wrap: wrap;
  1335. width: 100%;
  1336. padding-left: 10%;
  1337. padding-right: 10%;
  1338. margin: auto;
  1339. justify-items: center; }
  1340. @media (max-width: 442px) {
  1341. .equipe-event {
  1342. width: 100%;
  1343. padding-left: 3%;
  1344. padding-right: 2%; } }
  1345. .equipe-event h3 {
  1346. margin-bottom: 3rem;
  1347. min-width: 100%;
  1348. font-family: "Sarabun", sans-serif;
  1349. text-transform: uppercase;
  1350. font-weight: 200;
  1351. font-size: 1rem;
  1352. line-height: 20px;
  1353. text-align: left; }
  1354. @media (max-width: 442px) {
  1355. .equipe-event h3 {
  1356. font-size: 0.9rem;
  1357. padding-right: 0.5rem; } }
  1358. .equipe-event .personne {
  1359. display: flex;
  1360. flex-direction: row;
  1361. flex-wrap: wrap;
  1362. padding-right: 0.5rem;
  1363. padding-bottom: 0.5rem; }
  1364. .equipe-event .personne .mozaique {
  1365. display: flex;
  1366. flex-direction: row;
  1367. max-width: 30rem;
  1368. min-width: 30rem; }
  1369. @media (max-width: 442px) {
  1370. .equipe-event .personne .mozaique {
  1371. max-width: 21rem;
  1372. min-width: 21rem;
  1373. padding-left: 1rem; } }
  1374. .equipe-event .personne .mozaique .photo {
  1375. overflow: hidden;
  1376. width: 10rem !important;
  1377. height: 10rem !important; }
  1378. .equipe-event .personne .mozaique .photo img {
  1379. object-fit: cover;
  1380. width: 100%;
  1381. height: 100%; }
  1382. .equipe-event .personne .mozaique .info {
  1383. display: flex;
  1384. flex-direction: column;
  1385. font-family: "Sarabun", sans-serif;
  1386. width: 50%;
  1387. height: 15rem;
  1388. min-width: 15rem;
  1389. padding-left: 1.3rem; }
  1390. @media (max-width: 442px) {
  1391. .equipe-event .personne .mozaique .info {
  1392. max-width: 11rem;
  1393. min-width: 11rem; } }
  1394. .equipe-event .personne .mozaique .info .nom {
  1395. display: flex;
  1396. direction: row; }
  1397. .equipe-event .personne .mozaique .info .nom h5 {
  1398. padding-right: 0.4em !important; }
  1399. .equipe-event .personne .mozaique .info h5 {
  1400. font-weight: 900;
  1401. font-size: 1.1rem;
  1402. margin: 0;
  1403. padding-top: 0.8rem;
  1404. padding-right: 1rem; }
  1405. @media (max-width: 442px) {
  1406. .equipe-event .personne .mozaique .info h5 {
  1407. font-size: 0.9rem;
  1408. padding-right: 0.6rem; } }
  1409. .equipe-event .personne .mozaique .info h6 {
  1410. font-weight: 300;
  1411. font-size: 0.9rem;
  1412. font-style: italic;
  1413. line-height: 1.3;
  1414. margin: 0;
  1415. padding-right: 1.2rem; }
  1416. @media (max-width: 442px) {
  1417. .equipe-event .personne .mozaique .info h6 {
  1418. font-size: 0.75rem;
  1419. padding-right: 0.6rem; } }
  1420. .partenaires {
  1421. background-color: #fff;
  1422. height: auto;
  1423. padding-top: 2rem;
  1424. padding-bottom: 3rem;
  1425. margin-top: 0 !important; }
  1426. .partenaires h1 {
  1427. margin-top: 0 !important; }
  1428. .grille {
  1429. background-color: #fff;
  1430. padding-bottom: 6rem; }
  1431. .grille .tous-logos {
  1432. display: flex;
  1433. margin: auto;
  1434. max-width: 80%;
  1435. justify-content: center; }
  1436. .grille p {
  1437. justify-content: center;
  1438. display: flex;
  1439. margin: auto;
  1440. flex-wrap: wrap; }
  1441. .grille img {
  1442. height: 9rem;
  1443. display: flex;
  1444. padding: 2rem; }
  1445. .event #new-footer {
  1446. border-top: solid 5px #d9d9d9; }
  1447. .event #new-footer span {
  1448. height: 2rem; }
  1449. .modular.header-image #header {
  1450. background-color: rgba(255, 255, 255, 0);
  1451. box-shadow: none; }
  1452. .modular.header-image #header #logo h3 {
  1453. color: #FFFFFF; }
  1454. .modular.header-image #header #navbar a {
  1455. color: #FFFFFF; }
  1456. .modular .showcase {
  1457. padding-top: 4rem;
  1458. padding-bottom: 4rem;
  1459. background-color: #666;
  1460. background-size: cover;
  1461. background-position: center;
  1462. text-align: center;
  1463. color: #FFFFFF; }
  1464. .modular .showcase h1 {
  1465. font-size: 4rem;
  1466. margin-top: 0; }
  1467. @media only all and (min-width: 48em) and (max-width: 59.938em) {
  1468. .modular .showcase h1 {
  1469. font-size: 3rem; } }
  1470. @media only all and (max-width: 47.938em) {
  1471. .modular .showcase h1 {
  1472. font-size: 2.5rem;
  1473. line-height: 1.2;
  1474. margin-bottom: 2.5rem; } }
  1475. .modular .showcase .button {
  1476. color: #FFFFFF;
  1477. padding: 0.7rem 2rem;
  1478. margin-top: 2rem;
  1479. background: rgba(255, 255, 255, 0);
  1480. border: 1px solid #FFFFFF;
  1481. border-radius: 3px;
  1482. box-shadow: none;
  1483. font-size: 1.3rem; }
  1484. .modular .showcase .button:hover {
  1485. background: rgba(255, 255, 255, 0.2); }
  1486. .modular .titre_nsb h1 {
  1487. text-transform: uppercase;
  1488. text-align: right;
  1489. padding-right: 50%; }
  1490. .modular .features {
  1491. width: 75%;
  1492. margin: auto; }
  1493. .modular .features:after {
  1494. content: "";
  1495. display: table;
  1496. clear: both; }
  1497. .modular .features h2 {
  1498. margin: 0;
  1499. line-height: 100%; }
  1500. .modular .features p {
  1501. margin: 1rem 0;
  1502. font-size: 1.2rem; }
  1503. @media only all and (max-width: 47.938em) {
  1504. .modular .features p {
  1505. font-size: 1rem; } }
  1506. .modular .features .feature-items {
  1507. margin-top: 2rem; }
  1508. @supports not (flex-wrap: wrap) {
  1509. .modular .features .feature-items {
  1510. overflow: hidden; } }
  1511. .modular .features .feature {
  1512. display: block;
  1513. float: left;
  1514. width: 20%;
  1515. vertical-align: top;
  1516. margin-top: 2rem;
  1517. margin-right: 3rem;
  1518. margin-bottom: 1rem; }
  1519. @media only all and (min-width: 30.063em) and (max-width: 47.938em) {
  1520. .modular .features .feature {
  1521. margin-top: 1rem;
  1522. width: 50%; } }
  1523. @media only all and (max-width: 30em) {
  1524. .modular .features .feature {
  1525. margin-top: 1rem;
  1526. width: 100%; } }
  1527. .modular .features .feature i.fa {
  1528. font-size: 2rem;
  1529. color: #000; }
  1530. .modular .features .feature h4 {
  1531. margin: 0;
  1532. font-size: 1.1rem;
  1533. text-align: left; }
  1534. .modular .features .feature p {
  1535. display: inline-block;
  1536. font-size: 0.8rem;
  1537. margin: 0.2rem 0 1rem; }
  1538. .modular .features .feature img {
  1539. width: 45%;
  1540. display: block; }
  1541. .modular .features.big {
  1542. text-align: center; }
  1543. .modular .features.big .feature {
  1544. width: 50%; }
  1545. @media only all and (max-width: 30em) {
  1546. .modular .features.big .feature {
  1547. margin-top: 1rem;
  1548. width: 100%; } }
  1549. .modular .features.big i.fa {
  1550. font-size: 3rem;
  1551. float: left; }
  1552. .modular .features.big .feature-content {
  1553. padding-right: 2rem; }
  1554. .modular .features.big .feature-content.icon-offset {
  1555. margin-left: 5rem; }
  1556. .modular .features.big .feature-content h4 {
  1557. font-size: 1.3rem;
  1558. text-align: left; }
  1559. .modular .features.big .feature-content p {
  1560. padding: 0;
  1561. text-align: left; }
  1562. .callout {
  1563. background: #000;
  1564. color: #fff;
  1565. padding: 4rem 0.938rem; }
  1566. @media only all and (max-width: 59.938em) {
  1567. .callout {
  1568. text-align: center; } }
  1569. .callout .align-left {
  1570. float: left;
  1571. margin-right: 2rem; }
  1572. @media only all and (max-width: 59.938em) {
  1573. .callout .align-left {
  1574. float: none;
  1575. margin-right: 0; } }
  1576. .callout .align-right {
  1577. float: right;
  1578. margin-left: 2rem; }
  1579. @media only all and (max-width: 59.938em) {
  1580. .callout .align-right {
  1581. float: none;
  1582. margin-left: 0; } }
  1583. .callout img {
  1584. border-radius: 3px; }
  1585. .modular .modular-row:last-child {
  1586. margin-bottom: 2rem; }
  1587. /* Slider */
  1588. .slick-loading .slick-list {
  1589. background: #fff url("./ajax-loader.gif") center center no-repeat; }
  1590. /* Icons */
  1591. @font-face {
  1592. font-family: "slick";
  1593. src: url("./fonts/slick.eot");
  1594. src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
  1595. font-weight: normal;
  1596. font-style: normal; }
  1597. /* Arrows */
  1598. .slick-prev,
  1599. .slick-next {
  1600. position: absolute;
  1601. display: block;
  1602. height: 20px;
  1603. width: 20px;
  1604. line-height: 0px;
  1605. font-size: 0px;
  1606. cursor: pointer;
  1607. background: transparent;
  1608. color: transparent;
  1609. top: 50%;
  1610. -webkit-transform: translate(0, -50%);
  1611. -ms-transform: translate(0, -50%);
  1612. transform: translate(0, -50%);
  1613. padding: 0;
  1614. border: none;
  1615. outline: none; }
  1616. .slick-prev:hover, .slick-prev:focus,
  1617. .slick-next:hover,
  1618. .slick-next:focus {
  1619. outline: none;
  1620. background: transparent;
  1621. color: transparent; }
  1622. .slick-prev:hover:before, .slick-prev:focus:before,
  1623. .slick-next:hover:before,
  1624. .slick-next:focus:before {
  1625. opacity: 1; }
  1626. .slick-prev.slick-disabled:before,
  1627. .slick-next.slick-disabled:before {
  1628. opacity: 0.25; }
  1629. .slick-prev:before,
  1630. .slick-next:before {
  1631. font-family: "slick";
  1632. font-size: 20px;
  1633. line-height: 1;
  1634. color: white;
  1635. opacity: 0.75;
  1636. -webkit-font-smoothing: antialiased;
  1637. -moz-osx-font-smoothing: grayscale; }
  1638. .slick-prev {
  1639. left: 5%; }
  1640. [dir="rtl"] .slick-prev {
  1641. left: auto;
  1642. right: 5%; }
  1643. .slick-prev:before {
  1644. content: url("../../images/fleche_blanche.svg"); }
  1645. [dir="rtl"] .slick-prev:before {
  1646. content: url("../../images/fleche_blanche.svg"); }
  1647. .slick-next {
  1648. right: -25px; }
  1649. [dir="rtl"] .slick-next {
  1650. left: -25px;
  1651. right: auto; }
  1652. .slick-next:before {
  1653. content: url("../../images/fleche_blanche.svg"); }
  1654. [dir="rtl"] .slick-next:before {
  1655. content: url("../../images/fleche_blanche.svg"); }
  1656. /* Dots */
  1657. .slick-dotted.slick-slider {
  1658. margin-bottom: 30px; }
  1659. .slick-dots {
  1660. position: absolute;
  1661. bottom: -25px;
  1662. list-style: none;
  1663. display: block;
  1664. text-align: center;
  1665. padding: 0;
  1666. margin: 0;
  1667. width: 100%; }
  1668. .slick-dots li {
  1669. position: relative;
  1670. display: inline-block;
  1671. height: 20px;
  1672. width: 20px;
  1673. margin: 0 5px;
  1674. padding: 0;
  1675. cursor: pointer; }
  1676. .slick-dots li button {
  1677. border: 0;
  1678. background: transparent;
  1679. display: block;
  1680. height: 20px;
  1681. width: 20px;
  1682. outline: none;
  1683. line-height: 0px;
  1684. font-size: 0px;
  1685. color: transparent;
  1686. padding: 5px;
  1687. cursor: pointer; }
  1688. .slick-dots li button:hover, .slick-dots li button:focus {
  1689. outline: none; }
  1690. .slick-dots li button:hover:before, .slick-dots li button:focus:before {
  1691. opacity: 1; }
  1692. .slick-dots li button:before {
  1693. position: absolute;
  1694. top: 0;
  1695. left: 0;
  1696. content: "•";
  1697. width: 20px;
  1698. height: 20px;
  1699. font-family: "slick";
  1700. font-size: 6px;
  1701. line-height: 20px;
  1702. text-align: center;
  1703. color: black;
  1704. opacity: 0.25;
  1705. -webkit-font-smoothing: antialiased;
  1706. -moz-osx-font-smoothing: grayscale; }
  1707. .slick-dots li.slick-active button:before {
  1708. color: black;
  1709. opacity: 0.75; }
  1710. /* Slider */
  1711. .slick-slider {
  1712. position: relative;
  1713. display: block;
  1714. box-sizing: border-box;
  1715. -webkit-touch-callout: none;
  1716. -webkit-user-select: none;
  1717. -khtml-user-select: none;
  1718. -moz-user-select: none;
  1719. -ms-user-select: none;
  1720. user-select: none;
  1721. -ms-touch-action: pan-y;
  1722. touch-action: pan-y;
  1723. -webkit-tap-highlight-color: transparent; }
  1724. .slick-list {
  1725. position: relative;
  1726. overflow: hidden;
  1727. display: block;
  1728. margin: 0;
  1729. padding: 0; }
  1730. .slick-list:focus {
  1731. outline: none; }
  1732. .slick-list.dragging {
  1733. cursor: pointer;
  1734. cursor: hand; }
  1735. .slick-slider .slick-track,
  1736. .slick-slider .slick-list {
  1737. -webkit-transform: translate3d(0, 0, 0);
  1738. -moz-transform: translate3d(0, 0, 0);
  1739. -ms-transform: translate3d(0, 0, 0);
  1740. -o-transform: translate3d(0, 0, 0);
  1741. transform: translate3d(0, 0, 0); }
  1742. .slick-track {
  1743. position: relative;
  1744. left: 0;
  1745. top: 0;
  1746. display: block;
  1747. margin-left: auto;
  1748. margin-right: auto; }
  1749. .slick-track:before, .slick-track:after {
  1750. content: "";
  1751. display: table; }
  1752. .slick-track:after {
  1753. clear: both; }
  1754. .slick-loading .slick-track {
  1755. visibility: hidden; }
  1756. .slick-slide {
  1757. float: left;
  1758. height: 100%;
  1759. min-height: 1px;
  1760. display: none; }
  1761. [dir="rtl"] .slick-slide {
  1762. float: right; }
  1763. .slick-slide img {
  1764. display: block; }
  1765. .slick-slide.slick-loading img {
  1766. display: none; }
  1767. .slick-slide.dragging img {
  1768. pointer-events: none; }
  1769. .slick-initialized .slick-slide {
  1770. display: block; }
  1771. .slick-loading .slick-slide {
  1772. visibility: hidden; }
  1773. .slick-vertical .slick-slide {
  1774. display: block;
  1775. height: auto;
  1776. border: 1px solid transparent; }
  1777. .slick-arrow.slick-hidden {
  1778. display: none; }