template.css 52 KB

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