creative.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678
  1. /*!
  2. * Start Bootstrap - Creative Bootstrap Theme (http://startbootstrap.com)
  3. * Code licensed under the Apache License v2.0.
  4. * For details, see http://www.apache.org/licenses/LICENSE-2.0.
  5. *
  6. * Rouge par défaut: #558b2f
  7. * Vert sympa: #558b2f
  8. */
  9. /* Pages persos */
  10. .intro{
  11. background: rgba(0,0,0,0.4);
  12. border-radius: 20px;
  13. padding: 10px;
  14. margin-bottom: 50px;
  15. margin-top:200px
  16. }
  17. .intro.support {
  18. background: rgb(227, 43, 69, 0.9);
  19. margin-bottom: 50px;
  20. margin-top: 0px;
  21. }
  22. #vision{
  23. text-align: justify;
  24. }
  25. #vision .list {
  26. padding: 0 50px;
  27. }
  28. #vision h3{
  29. font-style: italic;
  30. font-size: 20px;
  31. text-align: center;
  32. }
  33. #vision h4{
  34. font-weight: bold;
  35. margin-top: 50px;
  36. }
  37. .bottom-link {
  38. margin-top: 30px;
  39. }
  40. .bottom-link p {
  41. margin-bottom: 0px;
  42. }
  43. #vision .charte i {
  44. margin-right: 6px;
  45. }
  46. #soutenez-nous ol li {
  47. margin-bottom: 20px;
  48. }
  49. #partenaires .partner-row{
  50. margin-bottom: 30px;
  51. }
  52. @media(min-width:992px) {
  53. #projet{
  54. padding-right: 10px;
  55. }
  56. }
  57. .numsquare{
  58. width: 35px;
  59. margin-right: 10px;
  60. }
  61. #projet .panel {
  62. color: #333;
  63. margin-bottom: 75px;
  64. }
  65. #projet .jumbotron {
  66. color: #333;
  67. padding: 20px 50px;
  68. width: 80%;
  69. margin: auto;
  70. margin-bottom: 75px;
  71. }
  72. #projet .jumbotron h3 {
  73. margin-bottom: 30px;
  74. font-weight: bold;
  75. }
  76. #projet .panel-title {
  77. font-size: 20px;
  78. font-weight: 600;
  79. }
  80. #projet ul {
  81. padding: 0px 15px 0px 0px;
  82. margin: 0;
  83. list-style-type: none;
  84. }
  85. #projet .jumbotron li {
  86. padding: 0px 0px 0px 30px;
  87. margin-bottom: 15px;
  88. background: url('../img/bullet_tree.png') no-repeat left top;
  89. }
  90. #projet .panel li {
  91. padding: 0px 0px 0px 30px;
  92. margin-bottom: 15px;
  93. background: url('../img/bullet_leaf.png') no-repeat left top;
  94. }
  95. .participate-item {
  96. margin-bottom: 50px;
  97. padding: 0 50px;
  98. }
  99. .participate-item .participate-icon {
  100. float: left;
  101. height: 50px;
  102. width: 50px;
  103. margin: 1px 20px 0 10px;
  104. text-align: center;
  105. }
  106. .participate-item h3 {
  107. margin: 0 0 20px 0;
  108. font-weight: bold;
  109. font-size: 20px;
  110. }
  111. .participate-item p {
  112. overflow: hidden;
  113. }
  114. .participate-item a {
  115. color: #333;
  116. }
  117. #contact a {
  118. color: #fff;
  119. }
  120. #mentions-legales {
  121. padding: 5px;
  122. }
  123. #mentions-legales p {
  124. margin: 0;
  125. font-size: 12px;
  126. text-align: center;
  127. }
  128. #mentions-legales a {
  129. color: #FFF;
  130. text-decoration: underline;
  131. }
  132. .navbar-default a.page-scroll.highlight, .navbar-default.affix .nav a.highlight {
  133. color: #E32B45;
  134. }
  135. html,
  136. body {
  137. width: 100%;
  138. height: 100%;
  139. }
  140. body {
  141. font-family: Merriweather,'Helvetica Neue',Arial,sans-serif;
  142. }
  143. hr {
  144. max-width: 50px;
  145. border-color: #558b2f;
  146. border-width: 3px;
  147. }
  148. hr.light {
  149. border-color: #fff;
  150. margin-top: 10px;
  151. margin-bottom: 50px;
  152. }
  153. a {
  154. color: #558b2f;
  155. -webkit-transition: all .35s;
  156. -moz-transition: all .35s;
  157. transition: all .35s;
  158. }
  159. a:hover,
  160. a:focus {
  161. color: #eb3812;
  162. }
  163. h1,
  164. h2,
  165. h3,
  166. h4,
  167. h5,
  168. h6 {
  169. font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
  170. }
  171. h2.section-heading {
  172. text-align: center;
  173. }
  174. p {
  175. margin-bottom: 20px;
  176. font-size: 16px;
  177. line-height: 1.5;
  178. }
  179. .bg-primary {
  180. background-color: #558b2f;
  181. }
  182. .bg-secondary {
  183. background-color: #eee;
  184. }
  185. .bg-blue {
  186. background-color: #185687;
  187. color: #fff;
  188. }
  189. .bg-purple {
  190. background-color: #7564AA;
  191. color: #fff;
  192. }
  193. .bg-red {
  194. background-color: #E32B45;
  195. color: #fff;
  196. }
  197. .bg-green {
  198. background-color: #80AE41;
  199. color: #fff;
  200. }
  201. .bg-orange {
  202. background-color: #F57F28;
  203. color: #fff;
  204. }
  205. .bg-dark {
  206. color: #fff;
  207. background-color: #222;
  208. }
  209. .bg-white {
  210. background-color: #FFFFFF;
  211. }
  212. .text-faded {
  213. color: rgba(255,255,255,.7);
  214. }
  215. section {
  216. padding: 30px 0;
  217. }
  218. aside {
  219. padding: 50px 0;
  220. }
  221. .no-padding {
  222. padding: 0;
  223. }
  224. .navbar-default {
  225. border-color: rgba(34,34,34,.05);
  226. font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
  227. background-color: #fff;
  228. -webkit-transition: all .35s;
  229. -moz-transition: all .35s;
  230. transition: all .35s;
  231. }
  232. .logotera{
  233. /*height: 50px;*/
  234. max-height: 50px;
  235. }
  236. .typotera{
  237. max-height: 40px;
  238. margin-left: 5px;
  239. }
  240. .navbar-default .navbar-header .navbar-brand {
  241. /*background-image: url(../img/Logo.jpg);*/
  242. /*display: block;*/
  243. text-transform: uppercase;
  244. font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
  245. font-weight: 700;
  246. color: #558b2f;
  247. }
  248. .navbar-default .navbar-header .navbar-brand:hover,
  249. .navbar-default .navbar-header .navbar-brand:focus {
  250. color: #eb3812;
  251. }
  252. .navbar-default .nav > li>a,
  253. .navbar-default .nav>li>a:focus {
  254. text-transform: uppercase;
  255. font-size: 13px;
  256. font-weight: 700;
  257. color: #222;
  258. }
  259. .navbar-default .nav > li>a:hover,
  260. .navbar-default .nav>li>a:focus:hover {
  261. color: #558b2f;
  262. }
  263. .navbar-default .nav > li.active>a,
  264. .navbar-default .nav>li.active>a:focus {
  265. color: #558b2f!important;
  266. background-color: transparent;
  267. }
  268. .navbar-default .nav > li.active>a:hover,
  269. .navbar-default .nav>li.active>a:focus:hover {
  270. background-color: transparent;
  271. }
  272. @media(min-width:768px) {
  273. .navbar-default {
  274. border-color: rgba(255,255,255,.3);
  275. background-color: rgba(255,255,255,.7);
  276. }
  277. .navbar-default .navbar-header .navbar-brand {
  278. color: #424242;
  279. }
  280. .navbar-default .navbar-header .navbar-brand:hover,
  281. .navbar-default .navbar-header .navbar-brand:focus {
  282. color: #fff;
  283. }
  284. .navbar-default .nav > li>a,
  285. .navbar-default .nav>li>a:focus {
  286. color: #424242;
  287. }
  288. .navbar-default .nav > li>a:hover,
  289. .navbar-default .nav>li>a:focus:hover {
  290. color: #2e7d32;
  291. }
  292. .navbar-default.affix {
  293. border-color: rgba(34,34,34,.05);
  294. background-color: #fff;
  295. }
  296. .navbar-default.affix .navbar-header .navbar-brand {
  297. font-size: 14px;
  298. color: #558b2f;
  299. }
  300. .navbar-default.affix .navbar-header .navbar-brand:hover,
  301. .navbar-default.affix .navbar-header .navbar-brand:focus {
  302. color: #eb3812;
  303. }
  304. .navbar-default.affix .nav > li>a,
  305. .navbar-default.affix .nav>li>a:focus {
  306. color: #222;
  307. }
  308. .navbar-default.affix .nav > li>a:hover,
  309. .navbar-default.affix .nav>li>a:focus:hover {
  310. color: #558b2f;
  311. }
  312. }
  313. header {
  314. position: relative;
  315. width: 100%;
  316. min-height: auto;
  317. text-align: center;
  318. color: #fff;
  319. background-image: url(../img/header.jpg);
  320. background-position: center;
  321. -webkit-background-size: cover;
  322. -moz-background-size: cover;
  323. background-size: cover;
  324. -o-background-size: cover;
  325. }
  326. header .header-content {
  327. position: relative;
  328. width: 100%;
  329. padding: 100px 15px;
  330. text-align: center;
  331. text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
  332. }
  333. header .header-content .header-content-inner h1 {
  334. margin-top: 0;
  335. margin-bottom: 10px;
  336. text-transform: uppercase;
  337. font-weight: 700;
  338. }
  339. header .header-content .header-content-inner hr {
  340. margin: 30px auto;
  341. }
  342. header .header-content .header-content-inner p {
  343. font-size: 16px;
  344. font-weight: 300;
  345. }
  346. @media(min-width:768px) {
  347. header {
  348. min-height: 100%;
  349. }
  350. header .header-content {
  351. position: absolute;
  352. top: 40%;
  353. padding: 0 50px;
  354. -webkit-transform: translateY(-50%);
  355. -ms-transform: translateY(-50%);
  356. transform: translateY(-50%);
  357. }
  358. header .header-content .header-content-inner {
  359. margin-right: auto;
  360. margin-left: auto;
  361. max-width: 910px;
  362. }
  363. header .header-content .header-content-inner p {
  364. margin-right: auto;
  365. margin-left: auto;
  366. max-width: 80%;
  367. font-size: 18px;
  368. }
  369. }
  370. .section-heading {
  371. margin-top: 0;
  372. }
  373. .service-box {
  374. margin: 50px auto 0;
  375. max-width: 400px;
  376. }
  377. @media(min-width:992px) {
  378. .service-box {
  379. margin: 20px auto 0;
  380. }
  381. }
  382. .service-box p {
  383. margin-bottom: 0;
  384. }
  385. .portfolio-box {
  386. display: block;
  387. position: relative;
  388. margin: 0 auto;
  389. max-width: 650px;
  390. }
  391. .portfolio-box .portfolio-box-caption {
  392. display: block;
  393. position: absolute;
  394. bottom: 0;
  395. width: 100%;
  396. height: 100%;
  397. text-align: center;
  398. color: #fff;
  399. opacity: 0;
  400. background: rgba(240,95,64,.9);
  401. -webkit-transition: all .35s;
  402. -moz-transition: all .35s;
  403. transition: all .35s;
  404. }
  405. .portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
  406. position: absolute;
  407. top: 50%;
  408. width: 100%;
  409. text-align: center;
  410. transform: translateY(-50%);
  411. }
  412. .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
  413. .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
  414. padding: 0 15px;
  415. font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
  416. }
  417. .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
  418. text-transform: uppercase;
  419. font-size: 14px;
  420. font-weight: 600;
  421. }
  422. .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
  423. font-size: 18px;
  424. }
  425. .portfolio-box:hover .portfolio-box-caption {
  426. opacity: 1;
  427. }
  428. @media(min-width:768px) {
  429. .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
  430. font-size: 16px;
  431. }
  432. .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
  433. font-size: 22px;
  434. }
  435. }
  436. .call-to-action h2 {
  437. margin: 0 auto 20px;
  438. }
  439. .text-primary {
  440. color: #558b2f;
  441. }
  442. .no-gutter > [class*=col-] {
  443. padding-right: 0;
  444. padding-left: 0;
  445. }
  446. .btn-default {
  447. border-color: #fff;
  448. color: #222;
  449. background-color: #fff;
  450. -webkit-transition: all .35s;
  451. -moz-transition: all .35s;
  452. transition: all .35s;
  453. }
  454. .btn-default:hover,
  455. .btn-default:focus,
  456. .btn-default.focus,
  457. .btn-default:active,
  458. .btn-default.active,
  459. .open > .dropdown-toggle.btn-default {
  460. border-color: #ededed;
  461. color: #222;
  462. background-color: #f2f2f2;
  463. }
  464. .btn-default:active,
  465. .btn-default.active,
  466. .open > .dropdown-toggle.btn-default {
  467. background-image: none;
  468. }
  469. .btn-default.disabled,
  470. .btn-default[disabled],
  471. fieldset[disabled] .btn-default,
  472. .btn-default.disabled:hover,
  473. .btn-default[disabled]:hover,
  474. fieldset[disabled] .btn-default:hover,
  475. .btn-default.disabled:focus,
  476. .btn-default[disabled]:focus,
  477. fieldset[disabled] .btn-default:focus,
  478. .btn-default.disabled.focus,
  479. .btn-default[disabled].focus,
  480. fieldset[disabled] .btn-default.focus,
  481. .btn-default.disabled:active,
  482. .btn-default[disabled]:active,
  483. fieldset[disabled] .btn-default:active,
  484. .btn-default.disabled.active,
  485. .btn-default[disabled].active,
  486. fieldset[disabled] .btn-default.active {
  487. border-color: #fff;
  488. background-color: #fff;
  489. }
  490. .btn-default .badge {
  491. color: #fff;
  492. background-color: #222;
  493. }
  494. .btn-primary {
  495. border-color:#558b2f;
  496. color: #fff;
  497. background-color: #558b2f;
  498. -webkit-transition: all .35s;
  499. -moz-transition: all .35s;
  500. transition: all .35s;
  501. }
  502. .btn-primary:hover,
  503. .btn-primary:focus,
  504. .btn-primary.focus,
  505. .btn-primary:active,
  506. .btn-primary.active,
  507. .open > .dropdown-toggle.btn-primary {
  508. border-color: #33691e;
  509. color: #fff;
  510. background-color: #689f38;
  511. }
  512. .btn-primary:active,
  513. .btn-primary.active,
  514. .open > .dropdown-toggle.btn-primary {
  515. background-image: none;
  516. }
  517. .btn-primary.disabled,
  518. .btn-primary[disabled],
  519. fieldset[disabled] .btn-primary,
  520. .btn-primary.disabled:hover,
  521. .btn-primary[disabled]:hover,
  522. fieldset[disabled] .btn-primary:hover,
  523. .btn-primary.disabled:focus,
  524. .btn-primary[disabled]:focus,
  525. fieldset[disabled] .btn-primary:focus,
  526. .btn-primary.disabled.focus,
  527. .btn-primary[disabled].focus,
  528. fieldset[disabled] .btn-primary.focus,
  529. .btn-primary.disabled:active,
  530. .btn-primary[disabled]:active,
  531. fieldset[disabled] .btn-primary:active,
  532. .btn-primary.disabled.active,
  533. .btn-primary[disabled].active,
  534. fieldset[disabled] .btn-primary.active {
  535. border-color: #558b2f;
  536. background-color: #558b2f;
  537. }
  538. .btn-primary .badge, .btn-white {
  539. color: #558b2f;
  540. background-color: #fff;
  541. }
  542. .btn-white A {
  543. color: #558b2f;
  544. }
  545. .btn-white:hover,
  546. .btn-white:focus,
  547. .btn-white.focus,
  548. .btn-white:active,
  549. .btn-white.active,
  550. .open > .dropdown-toggle.btn-white {
  551. border-color: #33691e;
  552. color: #fff;
  553. background-color: #689f38;
  554. }
  555. .btn {
  556. border: 0;
  557. border-radius: 300px;
  558. text-transform: uppercase;
  559. font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
  560. font-weight: 700;
  561. }
  562. .btn-xl {
  563. padding: 15px 30px;
  564. }
  565. ::-moz-selection {
  566. text-shadow: none;
  567. color: #fff;
  568. background: #222;
  569. }
  570. ::selection {
  571. text-shadow: none;
  572. color: #fff;
  573. background: #222;
  574. }
  575. img::selection {
  576. color: #fff;
  577. background: 0 0;
  578. }
  579. img::-moz-selection {
  580. color: #fff;
  581. background: 0 0;
  582. }
  583. body {
  584. webkit-tap-highlight-color: #222;
  585. }