style.css 30 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222
  1. @import url(font-awesome.min.css);
  2. @import url("http://fonts.googleapis.com/css?family=Raleway:400,400italic,700,800");
  3. /*
  4. Highlights by HTML5 UP
  5. html5up.net | @n33co
  6. Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
  7. */
  8. /* Basic */
  9. html {
  10. background-color: #313a3d;
  11. background-attachment: fixed, fixed;
  12. background-image: url("images/overlay.png"), url("../images/bg.jpg");
  13. background-position: top left, center center;
  14. background-repeat: repeat, none;
  15. background-size: auto, cover;
  16. }
  17. html.is-loading body *, html.is-loading body *:before, html.is-loading body *:after {
  18. -moz-animation: none !important;
  19. -webkit-animation: none !important;
  20. -o-animation: none !important;
  21. -ms-animation: none !important;
  22. animation: none !important;
  23. -moz-transition: none !important;
  24. -webkit-transition: none !important;
  25. -o-transition: none !important;
  26. -ms-transition: none !important;
  27. transition: none !important;
  28. }
  29. html.is-touch {
  30. height: 100vh;
  31. overflow: hidden;
  32. }
  33. html.is-touch #wrapper {
  34. -webkit-backface-visibility: hidden;
  35. -webkit-overflow-scrolling: touch;
  36. -webkit-transform: translate3d(0, 0, 0);
  37. height: 100vh;
  38. overflow: auto;
  39. }
  40. body, input, select, textarea {
  41. color: #6f7577;
  42. font-family: "Raleway", "Helvetica", sans-serif;
  43. font-size: 15pt;
  44. font-weight: 400;
  45. line-height: 1.75em;
  46. }
  47. a {
  48. -moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
  49. -webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
  50. -o-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
  51. -ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
  52. transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
  53. border-bottom: dotted 1px;
  54. color: #8cd1a8;
  55. text-decoration: none;
  56. }
  57. a:hover {
  58. border-bottom-color: transparent !important;
  59. color: #8cd1a8 !important;
  60. text-decoration: none;
  61. }
  62. strong, b {
  63. color: #61686b;
  64. font-weight: 700;
  65. }
  66. em, i {
  67. font-style: italic;
  68. }
  69. p {
  70. margin: 0 0 2em 0;
  71. }
  72. h1, h2, h3, h4, h5, h6 {
  73. color: #61686b;
  74. font-weight: 800;
  75. letter-spacing: 0.075em;
  76. line-height: 1em;
  77. margin: 0 0 1em 0;
  78. text-transform: uppercase;
  79. }
  80. h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  81. color: inherit;
  82. text-decoration: none;
  83. }
  84. h2 {
  85. font-size: 1.75em;
  86. line-height: 1.5em;
  87. }
  88. h3 {
  89. font-size: 1em;
  90. line-height: 1.5em;
  91. }
  92. h4 {
  93. font-size: 0.9em;
  94. line-height: 1.5em;
  95. }
  96. h5 {
  97. font-size: 0.8em;
  98. line-height: 1.5em;
  99. }
  100. h6 {
  101. font-size: 0.7em;
  102. line-height: 1.5em;
  103. }
  104. sub {
  105. font-size: 0.8em;
  106. position: relative;
  107. top: 0.5em;
  108. }
  109. sup {
  110. font-size: 0.8em;
  111. position: relative;
  112. top: -0.5em;
  113. }
  114. hr {
  115. border: 0;
  116. border-bottom: solid 1px #dddddd;
  117. margin: 2em 0;
  118. }
  119. hr.major {
  120. margin: 3em 0;
  121. }
  122. blockquote {
  123. border-left: solid 6px #dddddd;
  124. font-style: italic;
  125. margin: 0 0 2em 0;
  126. padding: 0.5em 0 0.5em 1.5em;
  127. }
  128. code {
  129. background: rgba(144, 144, 144, 0.075);
  130. font-family: "Courier New", monospace;
  131. font-size: 0.9em;
  132. margin: 0 0.25em;
  133. padding: 0.25em 0.65em;
  134. }
  135. pre {
  136. -webkit-overflow-scrolling: touch;
  137. font-family: "Courier New", monospace;
  138. font-size: 0.9em;
  139. margin: 0 0 2em 0;
  140. }
  141. pre code {
  142. display: block;
  143. line-height: 1.75em;
  144. padding: 1em 1.5em;
  145. overflow-x: auto;
  146. }
  147. .align-left {
  148. text-align: left;
  149. }
  150. .align-center {
  151. text-align: center;
  152. }
  153. .align-right {
  154. text-align: right;
  155. }
  156. /* Loader */
  157. @-moz-keyframes spinner-show { 0% { opacity: 0; } 100% { opacity: 1; } }
  158. @-webkit-keyframes spinner-show { 0% { opacity: 0; } 100% { opacity: 1; } }
  159. @-o-keyframes spinner-show { 0% { opacity: 0; } 100% { opacity: 1; } }
  160. @-ms-keyframes spinner-show { 0% { opacity: 0; } 100% { opacity: 1; } }
  161. @keyframes spinner-show { 0% { opacity: 0; } 100% { opacity: 1; } }
  162. @-moz-keyframes spinner-hide { 0% { color: #454d50; z-index: 10001; -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 99% { color: #313a3d; z-index: 10001; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } 100% { color: #313a3d; z-index: -1; -moz-transform: scale(0) rotate(360deg); -webkit-transform: scale(0) rotate(360deg); -o-transform: scale(0) rotate(360deg); -ms-transform: scale(0) rotate(360deg); transform: scale(0) rotate(360deg); } }
  163. @-webkit-keyframes spinner-hide { 0% { color: #454d50; z-index: 10001; -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 99% { color: #313a3d; z-index: 10001; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } 100% { color: #313a3d; z-index: -1; -moz-transform: scale(0) rotate(360deg); -webkit-transform: scale(0) rotate(360deg); -o-transform: scale(0) rotate(360deg); -ms-transform: scale(0) rotate(360deg); transform: scale(0) rotate(360deg); } }
  164. @-o-keyframes spinner-hide { 0% { color: #454d50; z-index: 10001; -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 99% { color: #313a3d; z-index: 10001; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } 100% { color: #313a3d; z-index: -1; -moz-transform: scale(0) rotate(360deg); -webkit-transform: scale(0) rotate(360deg); -o-transform: scale(0) rotate(360deg); -ms-transform: scale(0) rotate(360deg); transform: scale(0) rotate(360deg); } }
  165. @-ms-keyframes spinner-hide { 0% { color: #454d50; z-index: 10001; -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 99% { color: #313a3d; z-index: 10001; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } 100% { color: #313a3d; z-index: -1; -moz-transform: scale(0) rotate(360deg); -webkit-transform: scale(0) rotate(360deg); -o-transform: scale(0) rotate(360deg); -ms-transform: scale(0) rotate(360deg); transform: scale(0) rotate(360deg); } }
  166. @keyframes spinner-hide { 0% { color: #454d50; z-index: 10001; -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 99% { color: #313a3d; z-index: 10001; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } 100% { color: #313a3d; z-index: -1; -moz-transform: scale(0) rotate(360deg); -webkit-transform: scale(0) rotate(360deg); -o-transform: scale(0) rotate(360deg); -ms-transform: scale(0) rotate(360deg); transform: scale(0) rotate(360deg); } }
  167. @-moz-keyframes spinner-rotate { 0% { -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 100% { -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); -o-transform: scale(1) rotate(360deg); -ms-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } }
  168. @-webkit-keyframes spinner-rotate { 0% { -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 100% { -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); -o-transform: scale(1) rotate(360deg); -ms-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } }
  169. @-o-keyframes spinner-rotate { 0% { -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 100% { -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); -o-transform: scale(1) rotate(360deg); -ms-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } }
  170. @-ms-keyframes spinner-rotate { 0% { -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 100% { -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); -o-transform: scale(1) rotate(360deg); -ms-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } }
  171. @keyframes spinner-rotate { 0% { -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 100% { -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); -o-transform: scale(1) rotate(360deg); -ms-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } }
  172. @-moz-keyframes overlay-hide { 0% { opacity: 1; z-index: 10000; } 15% { opacity: 1; z-index: 10000; } 99% { opacity: 0; z-index: 10000; } 100% { opacity: 0; z-index: -1; } }
  173. @-webkit-keyframes overlay-hide { 0% { opacity: 1; z-index: 10000; } 15% { opacity: 1; z-index: 10000; } 99% { opacity: 0; z-index: 10000; } 100% { opacity: 0; z-index: -1; } }
  174. @-o-keyframes overlay-hide { 0% { opacity: 1; z-index: 10000; } 15% { opacity: 1; z-index: 10000; } 99% { opacity: 0; z-index: 10000; } 100% { opacity: 0; z-index: -1; } }
  175. @-ms-keyframes overlay-hide { 0% { opacity: 1; z-index: 10000; } 15% { opacity: 1; z-index: 10000; } 99% { opacity: 0; z-index: 10000; } 100% { opacity: 0; z-index: -1; } }
  176. @keyframes overlay-hide { 0% { opacity: 1; z-index: 10000; } 15% { opacity: 1; z-index: 10000; } 99% { opacity: 0; z-index: 10000; } 100% { opacity: 0; z-index: -1; } }
  177. html body {
  178. text-decoration: none;
  179. }
  180. html body:before {
  181. -moz-osx-font-smoothing: grayscale;
  182. -webkit-font-smoothing: antialiased;
  183. font-family: FontAwesome;
  184. font-style: normal;
  185. font-weight: normal;
  186. text-transform: none !important;
  187. }
  188. html body:before {
  189. -moz-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
  190. -webkit-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
  191. -o-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
  192. -ms-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
  193. animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
  194. -moz-transform-origin: 50% 50%;
  195. -webkit-transform-origin: 50% 50%;
  196. -o-transform-origin: 50% 50%;
  197. -ms-transform-origin: 50% 50%;
  198. transform-origin: 50% 50%;
  199. color: #454d50;
  200. content: '\f1ce';
  201. cursor: default;
  202. display: block;
  203. font-size: 2em;
  204. height: 2em;
  205. left: 50%;
  206. opacity: 0;
  207. line-height: 2em;
  208. margin: -1em 0 0 -1em;
  209. position: fixed;
  210. text-align: center;
  211. top: 50%;
  212. width: 2em;
  213. z-index: -1;
  214. }
  215. html body:after {
  216. -moz-animation: overlay-hide 1s ease-in forwards !important;
  217. -webkit-animation: overlay-hide 1s ease-in forwards !important;
  218. -o-animation: overlay-hide 1s ease-in forwards !important;
  219. -ms-animation: overlay-hide 1s ease-in forwards !important;
  220. animation: overlay-hide 1s ease-in forwards !important;
  221. background: #313a3d;
  222. content: '';
  223. display: block;
  224. height: 100%;
  225. left: 0;
  226. opacity: 0;
  227. position: fixed;
  228. top: 0;
  229. width: 100%;
  230. z-index: -1;
  231. }
  232. html.is-loading body:before {
  233. -moz-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
  234. -webkit-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
  235. -o-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
  236. -ms-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
  237. animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
  238. z-index: 10001;
  239. }
  240. html.is-loading body:after {
  241. -moz-animation: none !important;
  242. -webkit-animation: none !important;
  243. -o-animation: none !important;
  244. -ms-animation: none !important;
  245. animation: none !important;
  246. opacity: 1;
  247. z-index: 10000;
  248. }
  249. @media (-webkit-min-device-pixel-ratio: 2) {
  250. html body:before {
  251. line-height: 2.025em;
  252. }
  253. }
  254. /* Section/Article */
  255. section.special, article.special {
  256. text-align: center;
  257. }
  258. header p {
  259. color: #a8b0b3;
  260. letter-spacing: 0.05em;
  261. text-transform: uppercase;
  262. }
  263. header h1 + p {
  264. margin-top: -1em;
  265. }
  266. header h2 + p {
  267. margin-top: -1em;
  268. }
  269. header h3 + p {
  270. margin-top: -0.8em;
  271. }
  272. header h4 + p,
  273. header h5 + p,
  274. header h6 + p {
  275. font-size: 0.8em;
  276. margin-top: -0.6em;
  277. }
  278. header.major {
  279. text-align: center;
  280. }
  281. header.major h1, header.major h2, header.major h3, header.major h4, header.major h5, header.major h6 {
  282. position: relative;
  283. }
  284. header.major h1:after, header.major h2:after, header.major h3:after, header.major h4:after, header.major h5:after, header.major h6:after {
  285. background: #dddddd;
  286. content: '';
  287. display: block;
  288. height: 2px;
  289. margin: 0.75em auto 0 auto;
  290. position: relative;
  291. width: 4em;
  292. }
  293. header.major p {
  294. margin-top: 0;
  295. }
  296. /* Form */
  297. form {
  298. margin: 0 0 2em 0;
  299. }
  300. label {
  301. color: #61686b;
  302. display: block;
  303. font-size: 0.9em;
  304. font-weight: 700;
  305. margin: 0 0 1em 0;
  306. }
  307. input[type="text"],
  308. input[type="password"],
  309. input[type="email"],
  310. select,
  311. textarea {
  312. -moz-appearance: none;
  313. -webkit-appearance: none;
  314. -o-appearance: none;
  315. -ms-appearance: none;
  316. appearance: none;
  317. background: rgba(144, 144, 144, 0.15);
  318. border-radius: 0;
  319. border: none;
  320. color: inherit;
  321. display: block;
  322. outline: 0;
  323. padding: 0 1em;
  324. text-decoration: none;
  325. width: 100%;
  326. }
  327. input[type="text"]:invalid,
  328. input[type="password"]:invalid,
  329. input[type="email"]:invalid,
  330. select:invalid,
  331. textarea:invalid {
  332. box-shadow: none;
  333. }
  334. input[type="text"]:focus,
  335. input[type="password"]:focus,
  336. input[type="email"]:focus,
  337. select:focus,
  338. textarea:focus {
  339. box-shadow: inset 0 0 0 2px #8cd1a8;
  340. }
  341. .select-wrapper {
  342. text-decoration: none;
  343. display: block;
  344. position: relative;
  345. }
  346. .select-wrapper:before {
  347. -moz-osx-font-smoothing: grayscale;
  348. -webkit-font-smoothing: antialiased;
  349. font-family: FontAwesome;
  350. font-style: normal;
  351. font-weight: normal;
  352. text-transform: none !important;
  353. }
  354. .select-wrapper:before {
  355. color: #a8b0b3;
  356. content: '\f078';
  357. display: block;
  358. height: 3em;
  359. line-height: 3em;
  360. pointer-events: none;
  361. position: absolute;
  362. right: 0;
  363. text-align: center;
  364. top: 0;
  365. width: 3em;
  366. }
  367. .select-wrapper select::-ms-expand {
  368. display: none;
  369. }
  370. input[type="text"],
  371. input[type="password"],
  372. input[type="email"],
  373. select {
  374. height: 3em;
  375. }
  376. textarea {
  377. padding: 0.75em 1em;
  378. }
  379. input[type="checkbox"],
  380. input[type="radio"] {
  381. -moz-appearance: none;
  382. -webkit-appearance: none;
  383. -o-appearance: none;
  384. -ms-appearance: none;
  385. appearance: none;
  386. display: block;
  387. float: left;
  388. margin-right: -2em;
  389. opacity: 0;
  390. width: 1em;
  391. z-index: -1;
  392. }
  393. input[type="checkbox"] + label,
  394. input[type="radio"] + label {
  395. text-decoration: none;
  396. color: #6f7577;
  397. cursor: pointer;
  398. display: inline-block;
  399. font-size: 1em;
  400. font-weight: 400;
  401. padding-left: 2.55em;
  402. padding-right: 0.75em;
  403. position: relative;
  404. }
  405. input[type="checkbox"] + label:before,
  406. input[type="radio"] + label:before {
  407. -moz-osx-font-smoothing: grayscale;
  408. -webkit-font-smoothing: antialiased;
  409. font-family: FontAwesome;
  410. font-style: normal;
  411. font-weight: normal;
  412. text-transform: none !important;
  413. }
  414. input[type="checkbox"] + label:before,
  415. input[type="radio"] + label:before {
  416. background: rgba(144, 144, 144, 0.15);
  417. content: '';
  418. display: inline-block;
  419. height: 1.8em;
  420. left: 0;
  421. line-height: 1.725em;
  422. position: absolute;
  423. text-align: center;
  424. top: 0;
  425. width: 1.8em;
  426. }
  427. input[type="checkbox"]:checked + label:before,
  428. input[type="radio"]:checked + label:before {
  429. background: #313a3d;
  430. color: #ffffff;
  431. content: '\f00c';
  432. }
  433. input[type="checkbox"]:focus + label:before,
  434. input[type="radio"]:focus + label:before {
  435. box-shadow: inset 0 0 0 2px #8cd1a8;
  436. }
  437. input[type="radio"] + label:before {
  438. border-radius: 100%;
  439. }
  440. ::-webkit-input-placeholder {
  441. color: #a8b0b3 !important;
  442. opacity: 1.0;
  443. }
  444. :-moz-placeholder {
  445. color: #a8b0b3 !important;
  446. opacity: 1.0;
  447. }
  448. ::-moz-placeholder {
  449. color: #a8b0b3 !important;
  450. opacity: 1.0;
  451. }
  452. :-ms-input-placeholder {
  453. color: #a8b0b3 !important;
  454. opacity: 1.0;
  455. }
  456. .formerize-placeholder {
  457. color: #a8b0b3 !important;
  458. opacity: 1.0;
  459. }
  460. /* Box */
  461. .box {
  462. border: solid 2px #dddddd;
  463. margin-bottom: 2em;
  464. padding: 1.5em;
  465. }
  466. .box > :last-child,
  467. .box > :last-child > :last-child,
  468. .box > :last-child > :last-child > :last-child {
  469. margin-bottom: 0;
  470. }
  471. .box.alt {
  472. border: 0;
  473. border-radius: 0;
  474. padding: 0;
  475. }
  476. /* Icon */
  477. .icon {
  478. text-decoration: none;
  479. border-bottom: none;
  480. position: relative;
  481. }
  482. .icon:before {
  483. -moz-osx-font-smoothing: grayscale;
  484. -webkit-font-smoothing: antialiased;
  485. font-family: FontAwesome;
  486. font-style: normal;
  487. font-weight: normal;
  488. text-transform: none !important;
  489. }
  490. .icon > .label {
  491. display: none;
  492. }
  493. .icon.major {
  494. display: block;
  495. margin: 0 0 1em 0;
  496. }
  497. .icon.major:before {
  498. font-size: 2.5em;
  499. }
  500. /* Image */
  501. .image {
  502. border: 0;
  503. display: inline-block;
  504. position: relative;
  505. }
  506. .image:before {
  507. background: url("images/overlay.png");
  508. content: '';
  509. display: block;
  510. height: 100%;
  511. left: 0;
  512. position: absolute;
  513. top: 0;
  514. width: 100%;
  515. }
  516. .image img {
  517. display: block;
  518. }
  519. .image.left {
  520. float: left;
  521. margin: 0 1.5em 1em 0;
  522. top: 0.25em;
  523. }
  524. .image.right {
  525. float: right;
  526. margin: 0 0 1em 1.5em;
  527. top: 0.25em;
  528. }
  529. .image.left, .image.right {
  530. max-width: 40%;
  531. }
  532. .image.left img, .image.right img {
  533. width: 100%;
  534. }
  535. .image.fit {
  536. display: block;
  537. margin: 0 0 2em 0;
  538. width: 100%;
  539. }
  540. .image.fit img {
  541. width: 100%;
  542. }
  543. /* List */
  544. ol {
  545. list-style: decimal;
  546. margin: 0 0 2em 0;
  547. padding-left: 1.25em;
  548. }
  549. ol li {
  550. padding-left: 0.25em;
  551. }
  552. ul {
  553. list-style: disc;
  554. margin: 0 0 2em 0;
  555. padding-left: 1em;
  556. }
  557. ul li {
  558. padding-left: 0.5em;
  559. }
  560. ul.alt {
  561. list-style: none;
  562. padding-left: 0;
  563. }
  564. ul.alt li {
  565. border-top: solid 1px #dddddd;
  566. padding: 0.5em 0;
  567. }
  568. ul.alt li:first-child {
  569. border-top: 0;
  570. padding-top: 0;
  571. }
  572. ul.icons {
  573. cursor: default;
  574. list-style: none;
  575. padding-left: 0;
  576. }
  577. ul.icons li {
  578. display: inline-block;
  579. padding: 0 1.5em 0 0;
  580. }
  581. ul.icons li:last-child {
  582. padding-right: 0;
  583. }
  584. ul.icons li .icon:before {
  585. font-size: 1.5em;
  586. }
  587. ul.icons-grid {
  588. list-style: none;
  589. padding: 0;
  590. position: relative;
  591. }
  592. ul.icons-grid li {
  593. display: block;
  594. float: left;
  595. padding: 3em 0;
  596. width: 50%;
  597. }
  598. ul.icons-grid li h3 {
  599. margin: 0;
  600. }
  601. ul.icons-grid li:nth-child(2n + 1) {
  602. box-shadow: inset -1px 0 0 0 #dddddd, 1px 0 0 0 #dddddd;
  603. }
  604. ul.icons-grid li:nth-child(2n + 3):before {
  605. background: #dddddd;
  606. content: '';
  607. display: block;
  608. height: 2px;
  609. margin-top: -3em;
  610. position: absolute;
  611. width: 100%;
  612. }
  613. ul.icons-grid:after {
  614. clear: both;
  615. content: '';
  616. display: block;
  617. }
  618. ul.actions {
  619. cursor: default;
  620. list-style: none;
  621. padding-left: 0;
  622. }
  623. ul.actions li {
  624. display: inline-block;
  625. padding: 0 1em 0 0;
  626. vertical-align: middle;
  627. }
  628. ul.actions li:last-child {
  629. padding-right: 0;
  630. }
  631. ul.actions.small li {
  632. padding: 0 0.5em 0 0;
  633. }
  634. ul.actions.vertical li {
  635. display: block;
  636. padding: 1em 0 0 0;
  637. }
  638. ul.actions.vertical li:first-child {
  639. padding-top: 0;
  640. }
  641. ul.actions.vertical li > * {
  642. margin-bottom: 0;
  643. }
  644. ul.actions.vertical.small li {
  645. padding: 0.5em 0 0 0;
  646. }
  647. ul.actions.vertical.small li:first-child {
  648. padding-top: 0;
  649. }
  650. ul.actions.fit {
  651. display: table;
  652. margin-left: -1em;
  653. padding: 0;
  654. table-layout: fixed;
  655. width: calc(100% + 1em);
  656. }
  657. ul.actions.fit li {
  658. display: table-cell;
  659. padding: 0 0 0 1em;
  660. }
  661. ul.actions.fit li > * {
  662. margin-bottom: 0;
  663. min-width: 0;
  664. }
  665. ul.actions.fit.small {
  666. margin-left: -0.5em;
  667. width: calc(100% + 0.5em);
  668. }
  669. ul.actions.fit.small li {
  670. padding: 0 0 0 0.5em;
  671. }
  672. dl {
  673. margin: 0 0 2em 0;
  674. }
  675. /* Table */
  676. .table-wrapper {
  677. -webkit-overflow-scrolling: touch;
  678. overflow-x: auto;
  679. }
  680. table {
  681. margin: 0 0 2em 0;
  682. width: 100%;
  683. }
  684. table tbody tr {
  685. border: solid 1px #dddddd;
  686. border-left: 0;
  687. border-right: 0;
  688. }
  689. table tbody tr:nth-child(2n + 1) {
  690. background-color: rgba(144, 144, 144, 0.075);
  691. }
  692. table td {
  693. padding: 0.75em 0.75em;
  694. }
  695. table th {
  696. color: #61686b;
  697. font-size: 0.9em;
  698. font-weight: 700;
  699. padding: 0 0.75em 0.75em 0.75em;
  700. text-align: left;
  701. }
  702. table thead {
  703. border-bottom: solid 2px #dddddd;
  704. }
  705. table tfoot {
  706. border-top: solid 2px #dddddd;
  707. }
  708. table.alt {
  709. border-collapse: separate;
  710. }
  711. table.alt tbody tr td {
  712. border: solid 1px #dddddd;
  713. border-left-width: 0;
  714. border-top-width: 0;
  715. }
  716. table.alt tbody tr td:first-child {
  717. border-left-width: 1px;
  718. }
  719. table.alt tbody tr:first-child td {
  720. border-top-width: 1px;
  721. }
  722. table.alt thead {
  723. border-bottom: 0;
  724. }
  725. table.alt tfoot {
  726. border-top: 0;
  727. }
  728. /* Button */
  729. input[type="submit"],
  730. input[type="reset"],
  731. input[type="button"],
  732. button,
  733. .button {
  734. -moz-appearance: none;
  735. -webkit-appearance: none;
  736. -o-appearance: none;
  737. -ms-appearance: none;
  738. appearance: none;
  739. -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  740. -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  741. -o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  742. -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  743. transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  744. background-color: transparent;
  745. border-radius: 0;
  746. border: 0;
  747. box-shadow: inset 0 0 0 2px #dddddd;
  748. color: #61686b !important;
  749. cursor: pointer;
  750. display: inline-block;
  751. font-weight: 700;
  752. height: 3em;
  753. letter-spacing: 0.05em;
  754. line-height: 3.15em;
  755. padding: 0 2em;
  756. text-align: center;
  757. text-decoration: none;
  758. text-transform: uppercase;
  759. white-space: nowrap;
  760. }
  761. input[type="submit"]:hover,
  762. input[type="reset"]:hover,
  763. input[type="button"]:hover,
  764. button:hover,
  765. .button:hover {
  766. background-color: rgba(144, 144, 144, 0.075);
  767. color: #61686b !important;
  768. }
  769. input[type="submit"]:active,
  770. input[type="reset"]:active,
  771. input[type="button"]:active,
  772. button:active,
  773. .button:active {
  774. background-color: rgba(144, 144, 144, 0.15);
  775. color: #61686b !important;
  776. }
  777. input[type="submit"].icon,
  778. input[type="reset"].icon,
  779. input[type="button"].icon,
  780. button.icon,
  781. .button.icon {
  782. padding-left: 1.35em;
  783. }
  784. input[type="submit"].icon:before,
  785. input[type="reset"].icon:before,
  786. input[type="button"].icon:before,
  787. button.icon:before,
  788. .button.icon:before {
  789. color: #a8b0b3;
  790. margin-right: 0.5em;
  791. }
  792. input[type="submit"].fit,
  793. input[type="reset"].fit,
  794. input[type="button"].fit,
  795. button.fit,
  796. .button.fit {
  797. display: block;
  798. margin: 0 0 1em 0;
  799. width: 100%;
  800. }
  801. input[type="submit"].small,
  802. input[type="reset"].small,
  803. input[type="button"].small,
  804. button.small,
  805. .button.small {
  806. font-size: 0.8em;
  807. }
  808. input[type="submit"].big,
  809. input[type="reset"].big,
  810. input[type="button"].big,
  811. button.big,
  812. .button.big {
  813. font-size: 1.35em;
  814. }
  815. input[type="submit"].special,
  816. input[type="reset"].special,
  817. input[type="button"].special,
  818. button.special,
  819. .button.special {
  820. background-color: #8cd1a8;
  821. border: 0;
  822. box-shadow: none;
  823. color: #ffffff !important;
  824. }
  825. input[type="submit"].special:hover,
  826. input[type="reset"].special:hover,
  827. input[type="button"].special:hover,
  828. button.special:hover,
  829. .button.special:hover {
  830. background-color: #9ed8b6;
  831. }
  832. input[type="submit"].special:active,
  833. input[type="reset"].special:active,
  834. input[type="button"].special:active,
  835. button.special:active,
  836. .button.special:active {
  837. background-color: #7aca9a;
  838. }
  839. input[type="submit"].special.icon:before,
  840. input[type="reset"].special.icon:before,
  841. input[type="button"].special.icon:before,
  842. button.special.icon:before,
  843. .button.special.icon:before {
  844. color: #d1ecdc;
  845. }
  846. input[type="submit"].disabled, input[type="submit"]:disabled,
  847. input[type="reset"].disabled,
  848. input[type="reset"]:disabled,
  849. input[type="button"].disabled,
  850. input[type="button"]:disabled,
  851. button.disabled,
  852. button:disabled,
  853. .button.disabled,
  854. .button:disabled {
  855. background-color: #6f7577 !important;
  856. box-shadow: none !important;
  857. color: #fff !important;
  858. cursor: default;
  859. opacity: 0.25;
  860. }
  861. /* Main BG */
  862. .main-bg {
  863. -moz-transition: opacity 0.5s ease-out;
  864. -webkit-transition: opacity 0.5s ease-out;
  865. -o-transition: opacity 0.5s ease-out;
  866. -ms-transition: opacity 0.5s ease-out;
  867. transition: opacity 0.5s ease-out;
  868. background-attachment: fixed, fixed;
  869. background-position: top left, center center;
  870. background-repeat: repeat, none;
  871. background-size: auto, cover;
  872. height: 100%;
  873. left: 0;
  874. opacity: 0;
  875. position: fixed;
  876. top: 0;
  877. width: 100%;
  878. z-index: -1;
  879. }
  880. .main-bg.active {
  881. opacity: 1;
  882. }
  883. /* Main */
  884. .main {
  885. position: relative;
  886. }
  887. .main .image.primary {
  888. display: none;
  889. }
  890. .main .container {
  891. padding: 5em 2.5em 8em 2.5em;
  892. background: rgba(255, 255, 255, 0.95);
  893. box-shadow: inset 0 1px 0 0 #dddddd;
  894. }
  895. .main .container:before {
  896. min-height: calc( 100vh - 13em );
  897. content: '';
  898. display: inline-block;
  899. vertical-align: middle;
  900. width: 1px;
  901. }
  902. .main .container .content {
  903. display: inline-block;
  904. margin-right: 1px;
  905. vertical-align: middle;
  906. width: calc(100% - 10px);
  907. }
  908. .main .goto-next {
  909. -moz-transition: background-color 0.2s ease-in-out;
  910. -webkit-transition: background-color 0.2s ease-in-out;
  911. -o-transition: background-color 0.2s ease-in-out;
  912. -ms-transition: background-color 0.2s ease-in-out;
  913. transition: background-color 0.2s ease-in-out;
  914. background-color: rgba(144, 144, 144, 0.075);
  915. background-image: url("images/arrow.svg");
  916. background-position: center center;
  917. background-repeat: no-repeat;
  918. border-radius: 100%;
  919. border: 0;
  920. bottom: 3em;
  921. display: block;
  922. height: 4em;
  923. left: 50%;
  924. line-height: 4em;
  925. margin-left: -2em;
  926. overflow: hidden;
  927. position: absolute;
  928. text-indent: 4em;
  929. white-space: nowrap;
  930. width: 4em;
  931. }
  932. .main .goto-next:hover {
  933. background-color: rgba(144, 144, 144, 0.15);
  934. }
  935. /* Header */
  936. #header {
  937. height: 100vh;
  938. position: relative;
  939. text-align: center;
  940. }
  941. #header:after {
  942. content: '';
  943. display: inline-block;
  944. height: 100vh;
  945. vertical-align: middle;
  946. }
  947. #header header {
  948. color: rgba(255, 255, 255, 0.5);
  949. display: inline-block;
  950. padding-bottom: 8em;
  951. vertical-align: middle;
  952. }
  953. #header header h1, #header header h2, #header header h3, #header header h4, #header header h5, #header header h6, #header header strong, #header header b {
  954. color: #ffffff;
  955. }
  956. #header header a {
  957. color: inherit;
  958. }
  959. #header header a:hover {
  960. color: #ffffff !important;
  961. }
  962. #header header h1 {
  963. font-size: 3em;
  964. line-height: 1.25em;
  965. margin: 0;
  966. }
  967. #header header h1:after {
  968. margin-top: 0.5em;
  969. }
  970. #header header p {
  971. color: #ffffff;
  972. font-weight: 700;
  973. margin: 1.5em 0 0 0;
  974. }
  975. #header .container {
  976. background: rgba(255, 255, 255, 0.95);
  977. bottom: 0;
  978. left: 50%;
  979. margin-left: -17.5em;
  980. padding: 2.5em;
  981. position: absolute;
  982. }
  983. #header .container > :last-child {
  984. margin-bottom: 0;
  985. }
  986. #header .container .button {
  987. min-width: 12em;
  988. }
  989. /* Footer */
  990. #footer {
  991. min-height: 100vh;
  992. padding: 0 0 12em 0;
  993. position: relative;
  994. text-align: center;
  995. }
  996. #footer .container {
  997. padding: 5em 2.5em 3em 2.5em;
  998. background: rgba(255, 255, 255, 0.95);
  999. box-shadow: inset 0 1px 0 0 #dddddd;
  1000. }
  1001. #footer footer {
  1002. bottom: 2em;
  1003. color: rgba(255, 255, 255, 0.5);
  1004. left: 0;
  1005. position: absolute;
  1006. text-align: center;
  1007. width: 100%;
  1008. }
  1009. #footer footer h1, #footer footer h2, #footer footer h3, #footer footer h4, #footer footer h5, #footer footer h6, #footer footer strong, #footer footer b {
  1010. color: #ffffff;
  1011. }
  1012. #footer footer a {
  1013. color: inherit;
  1014. }
  1015. #footer footer a:hover {
  1016. color: #ffffff !important;
  1017. }
  1018. #footer footer .copyright {
  1019. font-size: 0.8em;
  1020. line-height: 1em;
  1021. padding: 0;
  1022. }
  1023. #footer footer .copyright li {
  1024. border-left: solid 1px rgba(255, 255, 255, 0.2);
  1025. display: inline-block;
  1026. margin: 0 0 0 1em;
  1027. padding: 0 0 0 1em;
  1028. }
  1029. #footer footer .copyright li:first-child {
  1030. border-left: 0;
  1031. margin-left: 0;
  1032. padding-left: 0;
  1033. }