creative.css 13 KB

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