creative.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575
  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. #vision{
  11. min-height: 100%;
  12. text-align: justify;
  13. }
  14. #vision h3{
  15. font-style: italic;
  16. font-size: 20px;
  17. text-align: center;
  18. }
  19. #vision h4{
  20. font-weight: bold;
  21. }
  22. @media(min-width:992px) {
  23. #projet{
  24. padding-right: 10px;
  25. }
  26. }
  27. .numsquare{
  28. width: 35px;
  29. margin-right: 10px;
  30. }
  31. #projet .panel {
  32. color: #333;
  33. }
  34. #projet .jumbotron {
  35. color: #333;
  36. padding: 20px 50px;
  37. }
  38. #projet .jumbotron h3 {
  39. margin-bottom: 30px;
  40. font-weight: bold;
  41. }
  42. #projet .panel-title {
  43. font-size: 20px;
  44. font-weight: 600;
  45. }
  46. #projet ul {
  47. padding: 0px 15px 0px 0px;
  48. margin: 0;
  49. list-style-type: none;
  50. }
  51. #projet .jumbotron li {
  52. padding: 0px 0px 0px 30px;
  53. margin-bottom: 15px;
  54. background: url('../img/bullet_tree.png') no-repeat left top;
  55. }
  56. #projet .panel li {
  57. padding: 0px 0px 0px 30px;
  58. margin-bottom: 15px;
  59. background: url('../img/bullet_leaf.png') no-repeat left top;
  60. }
  61. #participer a {
  62. color: #fff;
  63. }
  64. html,
  65. body {
  66. width: 100%;
  67. height: 100%;
  68. }
  69. body {
  70. font-family: Merriweather,'Helvetica Neue',Arial,sans-serif;
  71. }
  72. hr {
  73. max-width: 50px;
  74. border-color: #558b2f;
  75. border-width: 3px;
  76. }
  77. hr.light {
  78. border-color: #fff;
  79. }
  80. a {
  81. color: #558b2f;
  82. -webkit-transition: all .35s;
  83. -moz-transition: all .35s;
  84. transition: all .35s;
  85. }
  86. a:hover,
  87. a:focus {
  88. color: #eb3812;
  89. }
  90. h1,
  91. h2,
  92. h3,
  93. h4,
  94. h5,
  95. h6 {
  96. font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
  97. }
  98. h2.section-heading {
  99. text-align: center;
  100. }
  101. p {
  102. margin-bottom: 20px;
  103. font-size: 16px;
  104. line-height: 1.5;
  105. }
  106. .contactmail {
  107. color: #fff;
  108. }
  109. .bg-primary {
  110. background-color: #558b2f;
  111. }
  112. .bg-secondary {
  113. background-color: #eee;
  114. }
  115. .bg-blue {
  116. background-color: #185687;
  117. color: #fff;
  118. }
  119. .bg-dark {
  120. color: #fff;
  121. background-color: #222;
  122. }
  123. .text-faded {
  124. color: rgba(255,255,255,.7);
  125. }
  126. section {
  127. padding: 30px 0;
  128. }
  129. aside {
  130. padding: 50px 0;
  131. }
  132. .no-padding {
  133. padding: 0;
  134. }
  135. .navbar-default {
  136. border-color: rgba(34,34,34,.05);
  137. font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
  138. background-color: #fff;
  139. -webkit-transition: all .35s;
  140. -moz-transition: all .35s;
  141. transition: all .35s;
  142. }
  143. .logotera{
  144. /*height: 50px;*/
  145. max-height: 50px;
  146. }
  147. .typotera{
  148. max-height: 40px;
  149. margin-left: 5px;
  150. }
  151. .navbar-default .navbar-header .navbar-brand {
  152. /*background-image: url(../img/Logo.jpg);*/
  153. /*display: block;*/
  154. text-transform: uppercase;
  155. font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
  156. font-weight: 700;
  157. color: #558b2f;
  158. }
  159. .navbar-default .navbar-header .navbar-brand:hover,
  160. .navbar-default .navbar-header .navbar-brand:focus {
  161. color: #eb3812;
  162. }
  163. .navbar-default .nav > li>a,
  164. .navbar-default .nav>li>a:focus {
  165. text-transform: uppercase;
  166. font-size: 13px;
  167. font-weight: 700;
  168. color: #222;
  169. }
  170. .navbar-default .nav > li>a:hover,
  171. .navbar-default .nav>li>a:focus:hover {
  172. color: #558b2f;
  173. }
  174. .navbar-default .nav > li.active>a,
  175. .navbar-default .nav>li.active>a:focus {
  176. color: #558b2f!important;
  177. background-color: transparent;
  178. }
  179. .navbar-default .nav > li.active>a:hover,
  180. .navbar-default .nav>li.active>a:focus:hover {
  181. background-color: transparent;
  182. }
  183. @media(min-width:768px) {
  184. .navbar-default {
  185. border-color: rgba(255,255,255,.3);
  186. background-color: transparent;
  187. }
  188. .navbar-default .navbar-header .navbar-brand {
  189. color: #424242;
  190. }
  191. .navbar-default .navbar-header .navbar-brand:hover,
  192. .navbar-default .navbar-header .navbar-brand:focus {
  193. color: #fff;
  194. }
  195. .navbar-default .nav > li>a,
  196. .navbar-default .nav>li>a:focus {
  197. color: #424242;
  198. }
  199. .navbar-default .nav > li>a:hover,
  200. .navbar-default .nav>li>a:focus:hover {
  201. color: #2e7d32;
  202. }
  203. .navbar-default.affix {
  204. border-color: rgba(34,34,34,.05);
  205. background-color: #fff;
  206. }
  207. .navbar-default.affix .navbar-header .navbar-brand {
  208. font-size: 14px;
  209. color: #558b2f;
  210. }
  211. .navbar-default.affix .navbar-header .navbar-brand:hover,
  212. .navbar-default.affix .navbar-header .navbar-brand:focus {
  213. color: #eb3812;
  214. }
  215. .navbar-default.affix .nav > li>a,
  216. .navbar-default.affix .nav>li>a:focus {
  217. color: #222;
  218. }
  219. .navbar-default.affix .nav > li>a:hover,
  220. .navbar-default.affix .nav>li>a:focus:hover {
  221. color: #558b2f;
  222. }
  223. }
  224. header {
  225. position: relative;
  226. width: 100%;
  227. min-height: auto;
  228. text-align: center;
  229. color: #fff;
  230. background-image: url(../img/header_bertrand.jpg);
  231. background-position: center;
  232. -webkit-background-size: cover;
  233. -moz-background-size: cover;
  234. background-size: cover;
  235. -o-background-size: cover;
  236. }
  237. header .header-content {
  238. position: relative;
  239. width: 100%;
  240. padding: 100px 15px;
  241. text-align: center;
  242. text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
  243. }
  244. header .header-content .header-content-inner h1 {
  245. margin-top: 0;
  246. margin-bottom: 0;
  247. text-transform: uppercase;
  248. font-weight: 700;
  249. }
  250. header .header-content .header-content-inner hr {
  251. margin: 30px auto;
  252. }
  253. header .header-content .header-content-inner p {
  254. margin-bottom: 50px;
  255. font-size: 16px;
  256. font-weight: 300;
  257. }
  258. @media(min-width:768px) {
  259. header {
  260. min-height: 100%;
  261. }
  262. header .header-content {
  263. position: absolute;
  264. top: 40%;
  265. padding: 0 50px;
  266. -webkit-transform: translateY(-50%);
  267. -ms-transform: translateY(-50%);
  268. transform: translateY(-50%);
  269. }
  270. header .header-content .header-content-inner {
  271. margin-right: auto;
  272. margin-left: auto;
  273. max-width: 1000px;
  274. }
  275. header .header-content .header-content-inner p {
  276. margin-right: auto;
  277. margin-left: auto;
  278. max-width: 80%;
  279. font-size: 18px;
  280. }
  281. }
  282. .section-heading {
  283. margin-top: 0;
  284. }
  285. .service-box {
  286. margin: 50px auto 0;
  287. max-width: 400px;
  288. }
  289. @media(min-width:992px) {
  290. .service-box {
  291. margin: 20px auto 0;
  292. }
  293. }
  294. .service-box p {
  295. margin-bottom: 0;
  296. }
  297. .portfolio-box {
  298. display: block;
  299. position: relative;
  300. margin: 0 auto;
  301. max-width: 650px;
  302. }
  303. .portfolio-box .portfolio-box-caption {
  304. display: block;
  305. position: absolute;
  306. bottom: 0;
  307. width: 100%;
  308. height: 100%;
  309. text-align: center;
  310. color: #fff;
  311. opacity: 0;
  312. background: rgba(240,95,64,.9);
  313. -webkit-transition: all .35s;
  314. -moz-transition: all .35s;
  315. transition: all .35s;
  316. }
  317. .portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
  318. position: absolute;
  319. top: 50%;
  320. width: 100%;
  321. text-align: center;
  322. transform: translateY(-50%);
  323. }
  324. .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
  325. .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
  326. padding: 0 15px;
  327. font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
  328. }
  329. .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
  330. text-transform: uppercase;
  331. font-size: 14px;
  332. font-weight: 600;
  333. }
  334. .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
  335. font-size: 18px;
  336. }
  337. .portfolio-box:hover .portfolio-box-caption {
  338. opacity: 1;
  339. }
  340. @media(min-width:768px) {
  341. .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
  342. font-size: 16px;
  343. }
  344. .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
  345. font-size: 22px;
  346. }
  347. }
  348. .call-to-action h2 {
  349. margin: 0 auto 20px;
  350. }
  351. .text-primary {
  352. color: #558b2f;
  353. }
  354. .no-gutter > [class*=col-] {
  355. padding-right: 0;
  356. padding-left: 0;
  357. }
  358. .btn-default {
  359. border-color: #fff;
  360. color: #222;
  361. background-color: #fff;
  362. -webkit-transition: all .35s;
  363. -moz-transition: all .35s;
  364. transition: all .35s;
  365. }
  366. .btn-default:hover,
  367. .btn-default:focus,
  368. .btn-default.focus,
  369. .btn-default:active,
  370. .btn-default.active,
  371. .open > .dropdown-toggle.btn-default {
  372. border-color: #ededed;
  373. color: #222;
  374. background-color: #f2f2f2;
  375. }
  376. .btn-default:active,
  377. .btn-default.active,
  378. .open > .dropdown-toggle.btn-default {
  379. background-image: none;
  380. }
  381. .btn-default.disabled,
  382. .btn-default[disabled],
  383. fieldset[disabled] .btn-default,
  384. .btn-default.disabled:hover,
  385. .btn-default[disabled]:hover,
  386. fieldset[disabled] .btn-default:hover,
  387. .btn-default.disabled:focus,
  388. .btn-default[disabled]:focus,
  389. fieldset[disabled] .btn-default:focus,
  390. .btn-default.disabled.focus,
  391. .btn-default[disabled].focus,
  392. fieldset[disabled] .btn-default.focus,
  393. .btn-default.disabled:active,
  394. .btn-default[disabled]:active,
  395. fieldset[disabled] .btn-default:active,
  396. .btn-default.disabled.active,
  397. .btn-default[disabled].active,
  398. fieldset[disabled] .btn-default.active {
  399. border-color: #fff;
  400. background-color: #fff;
  401. }
  402. .btn-default .badge {
  403. color: #fff;
  404. background-color: #222;
  405. }
  406. .btn-primary {
  407. border-color:#558b2f;
  408. color: #fff;
  409. background-color: #558b2f;
  410. -webkit-transition: all .35s;
  411. -moz-transition: all .35s;
  412. transition: all .35s;
  413. }
  414. .btn-primary:hover,
  415. .btn-primary:focus,
  416. .btn-primary.focus,
  417. .btn-primary:active,
  418. .btn-primary.active,
  419. .open > .dropdown-toggle.btn-primary {
  420. border-color: #33691e;
  421. color: #fff;
  422. background-color: #689f38;
  423. }
  424. .btn-primary:active,
  425. .btn-primary.active,
  426. .open > .dropdown-toggle.btn-primary {
  427. background-image: none;
  428. }
  429. .btn-primary.disabled,
  430. .btn-primary[disabled],
  431. fieldset[disabled] .btn-primary,
  432. .btn-primary.disabled:hover,
  433. .btn-primary[disabled]:hover,
  434. fieldset[disabled] .btn-primary:hover,
  435. .btn-primary.disabled:focus,
  436. .btn-primary[disabled]:focus,
  437. fieldset[disabled] .btn-primary:focus,
  438. .btn-primary.disabled.focus,
  439. .btn-primary[disabled].focus,
  440. fieldset[disabled] .btn-primary.focus,
  441. .btn-primary.disabled:active,
  442. .btn-primary[disabled]:active,
  443. fieldset[disabled] .btn-primary:active,
  444. .btn-primary.disabled.active,
  445. .btn-primary[disabled].active,
  446. fieldset[disabled] .btn-primary.active {
  447. border-color: #558b2f;
  448. background-color: #558b2f;
  449. }
  450. .btn-primary .badge {
  451. color: #558b2f;
  452. background-color: #fff;
  453. }
  454. .btn {
  455. border: 0;
  456. border-radius: 300px;
  457. text-transform: uppercase;
  458. font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
  459. font-weight: 700;
  460. }
  461. .btn-xl {
  462. padding: 15px 30px;
  463. }
  464. ::-moz-selection {
  465. text-shadow: none;
  466. color: #fff;
  467. background: #222;
  468. }
  469. ::selection {
  470. text-shadow: none;
  471. color: #fff;
  472. background: #222;
  473. }
  474. img::selection {
  475. color: #fff;
  476. background: 0 0;
  477. }
  478. img::-moz-selection {
  479. color: #fff;
  480. background: 0 0;
  481. }
  482. body {
  483. webkit-tap-highlight-color: #222;
  484. }