style.css 22 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222
  1. /* ==== Google font ==== */
  2. @import url('http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Merriweather:400italic');
  3. body {
  4. width: 100%;
  5. height: 100%;
  6. font-family: 'Lato',sans-serif;
  7. font-weight: 300;
  8. color: #666;
  9. background-color: #fff;
  10. }
  11. html {
  12. width: 100%;
  13. height: 100%;
  14. }
  15. h1,
  16. h2,
  17. h3,
  18. h4,
  19. h5,
  20. h6 {
  21. margin: 0 0 30px;
  22. text-transform: uppercase;
  23. font-family: Montserrat,sans-serif;
  24. font-weight: 700;
  25. letter-spacing: 0.1px;
  26. }
  27. p {
  28. margin: 0 0 20px;
  29. font-size: 1.128em;
  30. line-height: 1.6em;
  31. }
  32. p.lead {
  33. font-weight: 600;
  34. }
  35. a {
  36. color: #28c3ab;
  37. -webkit-transition: all .2s ease-in-out;
  38. -moz-transition: all .2s ease-in-out;
  39. transition: all .2s ease-in-out;
  40. text-decoration: underline;
  41. }
  42. a:hover,
  43. a:focus {
  44. text-decoration: none;
  45. color: #176e61;
  46. }
  47. .light {
  48. font-weight: 400;
  49. }
  50. .navbar {
  51. margin-bottom: 0;
  52. border-bottom: 1px solid rgba(33,33,33,.3);
  53. }
  54. .navbar-brand {
  55. height: 40px;
  56. padding: 10px 15px;
  57. line-height: 1em;
  58. }
  59. .navbar-brand:focus {
  60. outline: 0;
  61. }
  62. #neutrinet-logo {
  63. margin-top: 2px;
  64. height: 26px;
  65. max-width: 100px;
  66. }
  67. .nav.navbar-nav {
  68. background-color: rgba(255,255,255,.0);
  69. }
  70. .navbar-custom.top-nav-collapse .nav.navbar-nav {
  71. background-color: rgba(0,0,0,0);
  72. }
  73. /* Dynamic SVG CSS styling is so hot */
  74. .navbar-custom.top-nav-collapse #Layer_1 {
  75. fill: #333;
  76. }
  77. .navbar-custom ul.nav li a {
  78. font-size: 0.86em;
  79. letter-spacing: 1px;
  80. color: #fff;
  81. text-transform: uppercase;
  82. text-decoration: none;
  83. font-weight: 700;
  84. }
  85. .navbar-custom.top-nav-collapse ul.nav li a {
  86. -webkit-transition: all .2s ease-in-out;
  87. -moz-transition: all .2s ease-in-out;
  88. transition: all .2s ease-in-out;
  89. color: #333;
  90. }
  91. .navbar-custom ul.nav ul.dropdown-menu {
  92. border-radius: 0;
  93. }
  94. .navbar-custom ul.nav ul.dropdown-menu li {
  95. border-bottom: 1px solid #f5f5f5;
  96. }
  97. .navbar-custom ul.nav ul.dropdown-menu li:last-child{
  98. border-bottom: none;
  99. }
  100. .navbar-custom ul.nav ul.dropdown-menu li a {
  101. padding: 10px 20px;
  102. }
  103. .navbar-custom ul.nav ul.dropdown-menu li a:hover {
  104. background: #fefefe;
  105. }
  106. .navbar-custom.top-nav-collapse ul.nav ul.dropdown-menu li a {
  107. color: #666;
  108. }
  109. .navbar-custom .nav li a {
  110. -webkit-transition: background .3s ease-in-out;
  111. -moz-transition: background .3s ease-in-out;
  112. transition: background .3s ease-in-out;
  113. }
  114. .navbar-custom .nav li a:hover,
  115. .navbar-custom .nav li a:focus,
  116. .navbar-custom .nav li.active {
  117. outline: 0;
  118. background-color: rgba(200,200,200,.2);
  119. }
  120. .navbar-toggle {
  121. padding: 4px 6px;
  122. font-size: 0.8750em;
  123. color: #333;
  124. }
  125. .navbar-toggle:focus,
  126. .navbar-toggle:active {
  127. outline: 0;
  128. }
  129. /* loader */
  130. #preloader {
  131. background: #ffffff;
  132. bottom: 0;
  133. height: 100%;
  134. left: 0;
  135. position: fixed;
  136. right: 0;
  137. top: 0;
  138. width: 100%;
  139. z-index: 999;
  140. }
  141. #loaderInner {
  142. background:#ffffff url(../img/spinner.gif) center center no-repeat;
  143. height: 60px;
  144. left: 50%;
  145. margin: -50px 0 0 -50px;
  146. position: absolute;
  147. top: 50%;
  148. width: 60px;
  149. }
  150. @keyframes boxSpin{
  151. 0%{
  152. transform: translate(-10px, 0px);
  153. }
  154. 25%{
  155. transform: translate(10px, 10px);
  156. }
  157. 50%{
  158. transform: translate(10px, -10px);
  159. }
  160. 75%{
  161. transform: translate(-10px, -10px);
  162. }
  163. 100%{
  164. transform: translate(-10px, 10px);
  165. }
  166. }
  167. @keyframes shadowSpin{
  168. 0%{
  169. box-shadow: 10px -10px #39CCCC, -10px 10px #FFDC00;
  170. }
  171. 25%{
  172. box-shadow: 10px 10px #39CCCC, -10px -10px #FFDC00;
  173. }
  174. 50%{
  175. box-shadow: -10px 10px #39CCCC, 10px -10px #FFDC00;
  176. }
  177. 75%{
  178. box-shadow: -10px -10px #39CCCC, 10px 10px #FFDC00;
  179. }
  180. 100%{
  181. box-shadow: 10px -10px #39CCCC, -10px 10px #FFDC00;
  182. }
  183. }
  184. #load {
  185. z-index: 9999;
  186. background-color: #FF4136;
  187. opacity: 0.75;
  188. width: 10px;
  189. height: 10px;
  190. position: absolute;
  191. top: 50%;
  192. margin: -5px auto 0 auto;
  193. left: 0;
  194. right: 0;
  195. border-radius: 0px;
  196. border: 5px solid #FF4136;
  197. box-shadow: 10px 0px #39CCCC, 10px 0px #01FF70;
  198. animation: shadowSpin 1s ease-in-out infinite;
  199. }
  200. /* misc */
  201. hr {
  202. margin-top: 10px;
  203. }
  204. /* margins */
  205. .marginbot-0{margin-bottom:0 !important;}
  206. .marginbot-10{margin-bottom:10px !important;}
  207. .marginbot-20{margin-bottom:20px !important;}
  208. .marginbot-30{margin-bottom:30px !important;}
  209. .marginbot-40{margin-bottom:40px !important;}
  210. .marginbot-50{margin-bottom:50px !important;}
  211. /* ===========================
  212. --- General sections
  213. ============================ */
  214. .home-section {
  215. padding-top: 80px;
  216. padding-bottom: 60px;
  217. display:block;
  218. position:relative;
  219. z-index:120;
  220. }
  221. .section-heading h2 {
  222. font-size: 2.85em;
  223. }
  224. .section-heading i {
  225. margin-bottom: 20px;
  226. }
  227. /* --- section bg var --- */
  228. .bg-white {
  229. background: #fff;
  230. }
  231. .bg-gray {
  232. background: #f8f8f8;
  233. }
  234. .bg-dark {
  235. background: #575757;
  236. }
  237. /* --- section color var --- */
  238. .text-light {
  239. color: #fff;
  240. }
  241. .citation {
  242. padding-left: 12%;
  243. padding-right: 12%;
  244. }
  245. .citation blockquote {
  246. font-size: 1.575em;
  247. text-align: left;
  248. text-indent: 15px;
  249. font-style: italic;
  250. font-family: "Helvetica Neue",Helvetica,Arialself,sans-serif;
  251. color: #9A9A9A;
  252. }
  253. .under-citation {
  254. text-align: right;
  255. padding-right: 12%;
  256. }
  257. /* ===========================
  258. --- Big fat
  259. ============================ */
  260. .bigfat {
  261. width:100%;
  262. position:relative;
  263. background: url(../img/cat.jpg) no-repeat top center;
  264. }
  265. section.bigfat {
  266. padding:20% 0 0 0;
  267. }
  268. .bigfat .slogan {
  269. text-align: center;
  270. }
  271. .bigfat .page-scroll {
  272. text-align: center;
  273. }
  274. .bigfat-text {
  275. font-size: 1.125em;
  276. }
  277. .bigfat .slogan h2 {
  278. color: #FFF;
  279. text-shadow: none;
  280. font-size: 4.25em;
  281. line-height: 60px;
  282. font-weight: 700;
  283. font-family: Montserrat, sans-serif;
  284. background-color: rgba(0, 0, 0, 0);
  285. text-decoration: none;
  286. text-transform: uppercase;
  287. border-width: 0px;
  288. border-color: #000;
  289. border-style: none;
  290. text-shadow: -1px 0 3px #000;
  291. }
  292. .bigfat .slogan h3 {
  293. color: #fff;
  294. text-shadow: -1px 1px 3px #000;
  295. }
  296. .bigfat .slogan h4 {
  297. color: #fff;
  298. text-shadow: -1px 1px 3px #000;
  299. }
  300. .bigfat .slogan h5 {
  301. color: #fff;
  302. text-shadow: -1px 1px 3px #000;
  303. }
  304. /* ===========================
  305. --- Intro
  306. ============================ */
  307. .intro {
  308. background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 59%, rgba(0,0,0,0.65) 100%), url(../img/radionette.png) no-repeat top center;
  309. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(59%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))), url(../img/radionette.png) no-repeat top center;
  310. background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 59%,rgba(0,0,0,0.65) 100%), url(../img/radionette.png) no-repeat top center;
  311. background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 59%,rgba(0,0,0,0.65) 100%), url(../img/radionette.png) no-repeat top center;
  312. background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 59%,rgba(0,0,0,0.65) 100%), url(../img/radionette.png) no-repeat top center;
  313. background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 59%,rgba(0,0,0,0.65) 100%), url(../img/radionette.png) no-repeat top center;
  314. background-size: cover;
  315. }
  316. #intro {
  317. min-height: 250px;
  318. }
  319. /* ===========================
  320. --- ffdn
  321. ============================ */
  322. .ffdn {
  323. background: url(../img/ffdn.png) no-repeat center center;
  324. background-size: contain;
  325. }
  326. #ffdn-text {
  327. padding:03% 0 0 0;
  328. }
  329. #ffdn {
  330. min-height: 16em;
  331. }
  332. .ffdn-text .slogan h3 {
  333. font-size: 2.31em;
  334. text-transform: none;
  335. text-align: center;
  336. }
  337. .ffdn-text .slogan h4 {
  338. text-transform: none;
  339. text-align: center;
  340. margin-bottom: 0;
  341. }
  342. /* ===========================
  343. --- Campaign
  344. ============================ */
  345. #campaign .progress {
  346. height: 80px;
  347. }
  348. #campaign .progress-bar {
  349. line-height: 70px;
  350. font-size: 32px;
  351. }
  352. /* ===========================
  353. --- FriteDomBox
  354. ============================ */
  355. .fritedombox {
  356. background: url(../img/queen-mary.jpg) no-repeat top center;
  357. background-size: cover;
  358. text-align: center;
  359. padding: 0;
  360. }
  361. #fritedombox.fritedombox {
  362. padding-top: 10%;
  363. padding-bottom: 5%;
  364. }
  365. .fritedombox-friends {
  366. padding-top: 5%;
  367. }
  368. .black-title {
  369. padding: 20px 0;
  370. background: rgba(0,0,0,0.7);
  371. }
  372. div.black-title a {
  373. text-decoration: underline;
  374. }
  375. .fritedombox .slogan h2 {
  376. color: #FFF;
  377. text-shadow: none;
  378. font-size: 4.25em;
  379. line-height: 60px;
  380. font-weight: 700;
  381. font-family: Montserrat, sans-serif;
  382. background-color: rgba(0, 0, 0, 0);
  383. text-decoration: none;
  384. text-transform: uppercase;
  385. border-width: 0px;
  386. border-color: #000;
  387. border-style: none;
  388. text-shadow: -1px 0 3px #000;
  389. }
  390. .fritedombox .slogan h3 {
  391. color: #fff;
  392. text-shadow: -1px 1px 3px #000;
  393. }
  394. .fritedombox-friends h5 {
  395. color: #fff;
  396. text-shadow: -1px 1px 3px #000;
  397. margin-bottom: 10px;
  398. }
  399. .fritedombox-friends h6 {
  400. color: #fff;
  401. text-shadow: -1px 1px 3px #000;
  402. margin-top: 10px;
  403. margin-bottom: 0;
  404. }
  405. /* ===========================
  406. --- VPN
  407. ============================ */
  408. .vpn .slogan h3 {
  409. color: #fff;
  410. text-shadow: -1px 1px 3px #000;
  411. text-align: center;
  412. }
  413. .vpn {
  414. background: url(../img/trapped.jpg) no-repeat top center;
  415. background-size: cover;
  416. padding-top: 260px;
  417. padding-bottom: 5%;
  418. }
  419. .vpn .vpn-title {
  420. margin-top: -157px;
  421. color: rgba(0,0,0,0.7);
  422. text-align: center;
  423. font-size: 150px;
  424. letter-spacing: -10px;
  425. }
  426. .vpn .vpn-line1 {
  427. color: #eee;
  428. padding: 120px 0 0;
  429. text-align: left;
  430. -ms-transform: rotate(7deg); /* IE 9 */
  431. -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
  432. transform: rotate(7deg);
  433. }
  434. .vpn .vpn-line2 {
  435. color: #eee;
  436. padding: 60px 0 0;
  437. text-align: right;
  438. -ms-transform: rotate(-7deg); /* IE 9 */
  439. -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
  440. transform: rotate(-7deg);
  441. }
  442. .vpn .solution {
  443. padding-top: 70px;
  444. color: #729FCF;
  445. }
  446. .vpn-promotion {
  447. padding-top: 40px;
  448. padding-left: 25%;
  449. padding-right: 25%;
  450. }
  451. .slogan .vpn-promotion .boxed-grey {
  452. color: #333;
  453. background: rgba(255,255,255,0.8);
  454. text-shadow: 0px 0px 0px;
  455. text-transform: none;
  456. letter-spacing: -0.1px;
  457. }
  458. .slogan .vpn-promotion .boxed-grey small {
  459. color: #777;
  460. text-shadow: none;
  461. }
  462. .boxed-grey span.invert,
  463. .black-title span.invert {
  464. border-bottom: dashed 2px #555;
  465. }
  466. .boxed-grey {
  467. line-height: 1.5;
  468. }
  469. /* ===========================
  470. --- meetings
  471. ============================ */
  472. .meetings {
  473. background: url(../img/pinguines.jpg) no-repeat top center;
  474. background-size: cover;
  475. }
  476. #meetings {
  477. margin: 0;
  478. }
  479. #meetings.meetings {
  480. padding-top: 80px;
  481. }
  482. .meetings {
  483. color: #fff;
  484. margin-top: 10px;
  485. }
  486. .meetings h3 {
  487. text-transform: none;
  488. letter-spacing: 0px;
  489. font-size: 2.15em;
  490. }
  491. .meeting {
  492. background-color: #F9F9F9;
  493. color: #666;
  494. border: solid #666 1px;
  495. font-weight: 400;
  496. }
  497. /* ===========================
  498. --- become a member
  499. ============================ */
  500. .howtobecomeamember .blabla {
  501. margin-top: 15px;
  502. text-align: left;
  503. }
  504. .bank {
  505. padding: 8px;
  506. background-color: #F3F3F3;
  507. color: #666;
  508. border: solid #999 1px;
  509. font-weight: 400;
  510. }
  511. .howtobecomeamember .details {
  512. font-weight: 400;
  513. text-indent: 15px;
  514. }
  515. .howtobecomeamember .details li {
  516. text-indent: 0px;
  517. font-size: 1.128em;
  518. }
  519. .bank h4 {
  520. margin-bottom: 15px;
  521. }
  522. .bank p {
  523. margin-bottom: 0px;
  524. font-size: 1em;
  525. }
  526. /* ===========================
  527. --- diyisp
  528. ============================ */
  529. .diyisp {
  530. background: url(../img/diyisp.png) no-repeat top center;
  531. background-size: cover;
  532. }
  533. #diyisp.diyisp {
  534. padding: 0 0 0 0;
  535. }
  536. #diyisp {
  537. min-height: 250px;
  538. }
  539. .diyisp .slogan {
  540. position: absolute;
  541. bottom: 20px;
  542. text-align: center;
  543. margin-left: auto;
  544. margin-right: auto;
  545. left: 0;
  546. right: 0;
  547. }
  548. .diyisp .slogan h3 {
  549. color: #fff;
  550. text-shadow: -1px 1px 3px #000;
  551. font-size: 2.7125em;
  552. }
  553. .diyisp .slogan h4 {
  554. color: #fff;
  555. text-shadow: -1px 1px 3px #000;
  556. }
  557. /* ===========================
  558. --- panda
  559. ============================ */
  560. .panda {
  561. background: url(../img/panda.jpg) no-repeat top center;
  562. background-size: cover;
  563. }
  564. #panda.panda {
  565. padding: 0 0 0 0;
  566. }
  567. #panda {
  568. min-height: 250px;
  569. }
  570. .panda .slogan {
  571. position: absolute;
  572. bottom: 20px;
  573. text-align: center;
  574. margin-left: auto;
  575. margin-right: auto;
  576. left: 0;
  577. right: 0;
  578. }
  579. .panda .slogan h3 {
  580. color: #fff;
  581. text-shadow: -1px 1px 3px #000;
  582. font-size: 2.375em;
  583. }
  584. .panda .slogan h4 {
  585. color: #fff;
  586. text-shadow: -1px 1px 3px #000;
  587. }
  588. /* ===========================
  589. --- Get involved
  590. ============================ */
  591. .getinvolved h2 {
  592. text-transform: none;
  593. }
  594. .getinvolved h3 {
  595. text-transform: none;
  596. }
  597. .getinvolved h4 {
  598. text-transform: none;
  599. }
  600. .getinvolved h5 {
  601. text-transform: none;
  602. }
  603. .getinvolved-links a {
  604. color: #333;
  605. background-color: #EEE;
  606. border-color: #333;
  607. text-decoration: none;
  608. }
  609. .getinvolved-links a:hover {
  610. color: #FEFEFE;
  611. background-color: #777;
  612. }
  613. .service-icon {
  614. font-size: 3em;
  615. }
  616. /* ===========================
  617. --- About
  618. ============================ */
  619. .boxed-grey {
  620. background: #f9f9f9;
  621. padding: 20px;
  622. }
  623. .team h5 {
  624. margin-bottom: 10px;
  625. }
  626. .team p.subtitle {
  627. margin-bottom: 10px;
  628. }
  629. .avatar {
  630. margin-bottom: 20px;
  631. }
  632. .team-social {
  633. margin-left: 0;
  634. padding-left: 0;
  635. }
  636. .team-social {
  637. text-align: center;
  638. }
  639. .team-social li{
  640. display: inline-block;
  641. margin:0 !important;
  642. padding:0;
  643. }
  644. .team-social a{
  645. margin:0;
  646. padding:0;
  647. display: block;
  648. width: 40px;
  649. height: 40px;
  650. line-height: 40px;
  651. text-align: center;
  652. background: #3bbec0;
  653. color: #fff;
  654. -webkit-transition: background .3s ease-in-out;
  655. transition: background .3s ease-in-out;
  656. }
  657. .team-social a i{
  658. text-align: center;
  659. margin:0;
  660. padding:0;
  661. }
  662. .team-social .social-facebook a{background: #3873ae;}
  663. .team-social .social-twitter a{background: #62c6f8;}
  664. .team-social .social-dribble a{background: #d74980;}
  665. .team-social .social-deviantart a{background: #8da356;}
  666. .team-social .social-google a{background: #000;}
  667. .team-social .social-vimeo a{background: #51a6d3;}
  668. .team-social .social-facebook a:hover{background: #4893ce;}
  669. .team-social .social-twitter a:hover{background: #82e6ff;}
  670. .team-social .social-dribble a:hover{background: #f769a0;}
  671. .team-social .social-deviantart a:hover{background: #adc376;}
  672. .team-social .social-google a:hover{background: #333;}
  673. .team-social .social-vimeo a:hover{background: #71c6f3;}
  674. /* ===========================
  675. --- Services
  676. ============================ */
  677. .service-icon {
  678. margin-bottom: 20px;
  679. }
  680. /* ===========================
  681. --- Contact
  682. ============================ */
  683. form#contact-form .form-group label {
  684. text-align: left !important;
  685. display: block;
  686. text-transform: uppercase;
  687. letter-spacing: 1px;
  688. font-size: 0.750em;
  689. }
  690. form#contact-form input,form#contact-form select,form#contact-form textarea {
  691. border-radius: 0;
  692. border: 1px solid #eee;
  693. -webkit-box-shadow: none;
  694. box-shadow: none;
  695. }
  696. form#contact-form input:focus,form#contact-form select:focus,form#contact-form textarea:focus {
  697. -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  698. box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  699. }
  700. .input-group-addon {
  701. background-color: #fefefe;
  702. border: 1px solid #eee;
  703. border-radius: 0;
  704. }
  705. .widget-contact {
  706. text-align: left;
  707. }
  708. .company-social {
  709. margin-left: 0;
  710. padding-left: 0;
  711. margin-top: 10px;
  712. }
  713. .company-social {
  714. text-align: left;
  715. }
  716. .company-social li{
  717. display: inline-block;
  718. margin:0 !important;
  719. padding:0;
  720. }
  721. .company-social a{
  722. margin:0;
  723. padding:0;
  724. display: block;
  725. width: 40px;
  726. height: 40px;
  727. line-height: 40px;
  728. text-align: center;
  729. background: #3bbec0;
  730. color: #fff;
  731. -webkit-transition: background .3s ease-in-out;
  732. transition: background .3s ease-in-out;
  733. }
  734. .company-social a i{
  735. text-align: center;
  736. margin:0;
  737. padding:0;
  738. }
  739. .company-social .social-facebook a{background: #3873ae;}
  740. .company-social .social-twitter a{background: #62c6f8;}
  741. .company-social .social-dribble a{background: #d74980;}
  742. .company-social .social-deviantart a{background: #8da356;}
  743. .company-social .social-google a{background: #000;}
  744. .company-social .social-vimeo a{background: #51a6d3;}
  745. .company-social .social-facebook a:hover{background: #4893ce;}
  746. .company-social .social-twitter a:hover{background: #82e6ff;}
  747. .company-social .social-dribble a:hover{background: #f769a0;}
  748. .company-social .social-deviantart a:hover{background: #adc376;}
  749. .company-social .social-google a:hover{background: #333;}
  750. .company-social .social-vimeo a:hover{background: #71c6f3;}
  751. /* ===========================
  752. --- Footer
  753. ============================ */
  754. section.footer {
  755. text-align: center;
  756. padding: 20px 0;
  757. background: #fff;
  758. border-top: 1px solid rgb(33,33,33);
  759. }
  760. section.footer small {
  761. color: #333;
  762. }
  763. section.footer a {
  764. color: #333;
  765. font-weight: bold;
  766. }
  767. section.footer a:hover {
  768. color: orange;
  769. }
  770. /* ==========================
  771. Parallax
  772. ============================= */
  773. #parallax1{
  774. background-image: url(../img/parallax/1.jpg);
  775. }
  776. #parallax1:after {
  777. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWNgYGD4z0AswK4SAFXuAf8EPy+xAAAAAElFTkSuQmCC);
  778. content: "";
  779. position: absolute;
  780. bottom: 0;
  781. left: 0;
  782. right: 0;
  783. top: 0;
  784. opacity: 0.7;
  785. z-index: -1;
  786. }
  787. #parallax2{
  788. background-image: url(../img/parallax/2.jpg);
  789. }
  790. #parallax2:after {
  791. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWNgYGD4z0AswK4SAFXuAf8EPy+xAAAAAElFTkSuQmCC);
  792. content: "";
  793. position: absolute;
  794. bottom: 0;
  795. left: 0;
  796. right: 0;
  797. top: 0;
  798. opacity: 0.7;
  799. z-index: -1;
  800. }
  801. /* ===========================
  802. --- Elements
  803. ============================ */
  804. .btn {
  805. border-radius: 0;
  806. text-transform: uppercase;
  807. font-family: Montserrat,sans-serif;
  808. font-weight: 400;
  809. -webkit-transition: all .3s ease-in-out;
  810. -moz-transition: all .3s ease-in-out;
  811. transition: all .3s ease-in-out;
  812. }
  813. .btn-circle {
  814. width: 70px;
  815. height: 70px;
  816. margin-top: 15px;
  817. padding: 7px 16px;
  818. border: 2px solid #333;
  819. border-radius: 50%;
  820. font-size: 2.5em;
  821. color: #fff;
  822. background: 0 0;
  823. -webkit-transition: background .3s ease-in-out;
  824. -moz-transition: background .3s ease-in-out;
  825. transition: background .3s ease-in-out;
  826. }
  827. .btn-circle.btn-dark {
  828. border: 2px solid #666;
  829. color: #666;
  830. }
  831. .btn-circle:hover,
  832. .btn-circle:focus {
  833. outline: 0;
  834. color: #fff;
  835. background: rgba(255,255,255,.1);
  836. }
  837. .btn-circle.btn-dark :hover,
  838. .btn-circle.btn-dark :focus {
  839. outline: 0;
  840. color: #999;
  841. background: #fff;
  842. }
  843. .btn-circle.btn-dark :hover i,
  844. .btn-circle.btn-dark :focus i{
  845. color: #999;
  846. }
  847. .page-scroll .btn-circle i.animated {
  848. -webkit-transition-property: -webkit-transform;
  849. -webkit-transition-duration: 1s;
  850. -moz-transition-property: -moz-transform;
  851. -moz-transition-duration: 1s;
  852. }
  853. .page-scroll .btn-circle:hover i.animated {
  854. -webkit-animation-name: pulse;
  855. -moz-animation-name: pulse;
  856. -webkit-animation-duration: 1.5s;
  857. -moz-animation-duration: 1.5s;
  858. -webkit-animation-iteration-count: infinite;
  859. -moz-animation-iteration-count: infinite;
  860. -webkit-animation-timing-function: linear;
  861. -moz-animation-timing-function: linear;
  862. }
  863. @-webkit-keyframes pulse {
  864. 0 {
  865. -webkit-transform: scale(1);
  866. transform: scale(1);
  867. }
  868. 50% {
  869. -webkit-transform: scale(1.2);
  870. transform: scale(1.2);
  871. }
  872. 100% {
  873. -webkit-transform: scale(1);
  874. transform: scale(1);
  875. }
  876. }
  877. @-moz-keyframes pulse {
  878. 0 {
  879. -moz-transform: scale(1);
  880. transform: scale(1);
  881. }
  882. 50% {
  883. -moz-transform: scale(1.2);
  884. transform: scale(1.2);
  885. }
  886. 100% {
  887. -moz-transform: scale(1);
  888. transform: scale(1);
  889. }
  890. }
  891. #text {
  892. color: #fff;
  893. background: #ffcc00;
  894. }
  895. #map {
  896. height: 500px;
  897. }
  898. .btn-skin:hover,
  899. .btn-skin:focus,
  900. .btn-skin:active,
  901. .btn-skin.active {
  902. color: #fff;
  903. background-color: #666;
  904. border-color: #666;
  905. }
  906. .btn-default:hover,
  907. .btn-default:focus {
  908. border: 1px solid #28c3ab;
  909. outline: 0;
  910. color: #000;
  911. background-color: #28c3ab;
  912. }
  913. .btn-huge {
  914. padding: 25px;
  915. font-size: 1.625em;
  916. }
  917. .banner-social-buttons {
  918. margin-top: 0;
  919. }
  920. /* Media queries */
  921. @media(min-width:767px) {
  922. .navbar {
  923. padding: 20px 0;
  924. border-bottom: 0;
  925. letter-spacing: 1px;
  926. background: 0 0;
  927. color: #eee;
  928. -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
  929. -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
  930. transition: background .5s ease-in-out,padding .5s ease-in-out;
  931. }
  932. .top-nav-collapse {
  933. padding: 0;
  934. background-color: #000;
  935. }
  936. .navbar-custom.top-nav-collapse {
  937. border-bottom: 1px solid rgba(33,33,33,.3);
  938. }
  939. .bigfat {
  940. height: 100%;
  941. padding: 0;
  942. }
  943. .ffdn {
  944. padding: 0;
  945. }
  946. .meetings {
  947. padding: 0;
  948. }
  949. .fritedombox {
  950. padding: 0;
  951. }
  952. .brand-heading {
  953. font-size: 6.250em;
  954. }
  955. .intro-text {
  956. font-size: 1.563em;
  957. }
  958. }
  959. @media (max-width:768px) {
  960. .team.boxed-grey {
  961. margin-bottom: 30px;
  962. }
  963. .boxed-grey {
  964. margin-bottom: 30px;
  965. }
  966. }
  967. @media (max-width:480px) {
  968. .navbar-custom .nav.navbar-nav {
  969. background-color: rgba(255,255,255,.4);
  970. }
  971. .navbar.navbar-custom.navbar-fixed-top {
  972. margin-bottom: 30px;
  973. }
  974. .tp-banner-container {
  975. padding-top:40px;
  976. }
  977. .page-scroll a.btn-circle {
  978. width: 40px;
  979. height: 40px;
  980. margin-top: 10px;
  981. padding: 7px 0;
  982. border: 2px solid #fff;
  983. border-radius: 50%;
  984. font-size: 1.250em;
  985. }
  986. }