API tools faq
paste
RyanEarnshaw

Untitled

RyanEarnshaw
Apr 21st, 2017
117
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.21 KB | None | 0 0
raw download clone embed print report
  1. .bodycontainer {
  2. position: relative;
  3. display: inline-block;
  4. margin-top: 80px; /* size of header */
  5. padding-left: 20%; /* size of side-nav */
  6. padding-bottom: 200px;
  7. background-color: #ffffff;
  8. float: left;
  9. width: 100%;
  10. box-sizing: border-box;
  11. }
  12. .innercont {
  13. position: relative;
  14. display: inline-block;
  15. float: left;
  16. padding: 5vh 5vw;
  17. width: 100%;
  18. box-sizing: border-box;
  19. background-color: #ffffff;
  20. }
  21.  
  22.  
  23. .innercont .title {
  24. position: relative;
  25. display: inline-block;
  26. float: left;
  27. width: 100%;
  28. margin: 20px 0 20px;
  29. }
  30. .innercont .title h1 {
  31. font-size: 40px;
  32. font-family: 'Work Sans';
  33. font-weight: 100;
  34. color: #8ec640;
  35. }
  36. .innercont .title:after {
  37. content: '';
  38. position: absolute;
  39. bottom: -16px;
  40. width: 0px;
  41. height: 2px;
  42. background-color: #8ec640;
  43. animation: underline_animation 1s 0.5s 1 normal forwards;
  44. -o-animation: underline_animation 1s 0.5s 1 normal forwards;
  45. -moz-animation: underline_animation 1s 0.5s 1 normal forwards;
  46. -webkit-animation: underline_animation 1s 0.5s 1 normal forwards;
  47. }
  48. @keyframes underline_animation {
  49. 0% { width: 0px; }
  50. 100% { width: 100px; }
  51. }
  52. @-webkit-keyframes underline_animation {
  53. 0% { width: 0px; }
  54. 100% { width: 100px; }
  55. }
  56. @-moz-keyframes underline_animation {
  57. 0% { width: 0px; }
  58. 100% { width: 100px; }
  59. }
  60. @-o-keyframes underline_animation {
  61. 0% { width: 0px; }
  62. 100% { width: 100px; }
  63. }
  64. .innercont .body {
  65. position: relative;
  66. display: inline-block;
  67. float: left;
  68. width: 100%;
  69. overflow-x: hidden;
  70. }
  71. .innercont .body .column {
  72. position: relative;
  73. display: inline-block;
  74. height: 100%;
  75. float: left;
  76. }
  77. .innercont .body .column.c1 { width: 30%; margin-right: 5%; }
  78. .innercont .body .column.c2 { width: 65% }
  79.  
  80. .innercont .body h1 {
  81. position: relative;
  82. font-size: 20px;
  83. font-family: sans-serif;
  84. font-weight: bold;
  85. color: #6b6b6b;
  86. margin: 7px 0;
  87. line-height: 25px;
  88. width: 100%;
  89. float: left;
  90. }
  91. .innercont .body h2 {
  92. position: relative;
  93. font-size: 15px;
  94. font-family: sans-serif;
  95. font-weight: 100;
  96. color: #6b6b6b;
  97. margin: 7px 0;
  98. line-height: 25px;
  99. width: 100%;
  100. float: left;
  101. }
  102.  
  103. .email-modal {
  104. position: fixed;
  105. display: inline-block;
  106. top: -100px;
  107. left: 50%;
  108. transform: translateX(-50%);
  109. width: 100%;
  110. max-width: 600px;
  111. padding: 10px 0 12px;
  112. box-sizing: border-box;
  113. z-index: 100;
  114. border-radius: 5px;
  115. animation: email_animation 5s 0.5s 1 normal forwards;
  116. }
  117. @keyframes email_animation {
  118. 0% { top: -100px; }
  119. 20% { top: 30px; }
  120. 80% { top: 30px; }
  121. 100% { top: -100px; }
  122. }
  123. .email-modal.email-successful { background-color: #8ec640; }
  124. .email-modal.email-unsuccessful { background-color: #e04040; }
  125. .email-modal h1 {
  126. position: relative;
  127. display: inline-block;
  128. width: 100%;
  129. color: #000000;
  130. font-family: sans-serif;
  131. font-weight: bolf;
  132. font-size: 12px;
  133. text-align: center;
  134. }
  135.  
  136.  
  137. .innercont .loadingbar {
  138. position: relative;
  139. display: inline-block;
  140. float: left;
  141. width: 100%;
  142. height: 20px;
  143. margin: 20px 0;
  144. background-color: #6c6c6c;
  145. border-radius:20px;
  146. }
  147. .innercont .loadingbar:after {
  148. content: '';
  149. position: absolute;
  150. display: inline-block;
  151. top: 0;
  152. left: 0;
  153. width: 0;
  154. height: 20px;
  155. background-color: #8ec640;
  156. border-radius:20px;
  157. transition: width 0.5s ease;
  158. }
  159. .innercont .loadingbar.step1:after { width: 33%; }
  160. .innercont .loadingbar.step2:after { width: 66%; }
  161. .innercont .loadingbar.step3:after { width: 100%; }
  162.  
  163. .innercont .body .form-holder {
  164. position: relative;
  165. display: inline-block;
  166. width: 100%;
  167. max-width: 100%;
  168. overflow: hidden;
  169. }
  170. .innercont .body .form-slider {
  171. position: relative;
  172. display: inline-block;
  173. width: 400%;
  174. top: 0;
  175. }
  176. .innercont .body .form-holder .page {
  177. position: relative;
  178. display: inline-block;
  179. width: 25%;
  180. transition: left 0.5s ease;
  181. float: left;
  182. vertical-align: top;
  183. }
  184.  
  185.  
  186.  
  187. .innercont .body .form h1 {
  188. font-size: 14px;
  189. font-family: sans-serif;
  190. font-weight: 600;
  191. color: #848484;
  192. }
  193. .innercont .body .form h1 .star {
  194. font-family: monospace;
  195. font-size: 17px;
  196. color: #da2626;
  197. }
  198. .innercont .body .form input,
  199. .innercont .body .form select {
  200. position: relative;
  201. display: inline-block;
  202. color: #8ec640;
  203. font-size: 13px;
  204. border: none;
  205. padding: 13px 5px;
  206. margin: 3px 0;
  207. background-color: #dfdfdf;
  208. border-radius: 2px;
  209. font-family: arial;
  210. box-sizing: border-box;
  211. float: left;
  212. width: 100%;
  213. }
  214. .innercont .body .form .insubmit {
  215. font-size: 14px;
  216. float: left;
  217. padding: 15px 40px;
  218. font-family: 'Raleway';
  219. margin-top: 10px;
  220. border: 2px solid #8ec640;
  221. background-color: #8ec640;
  222. color: #ffffff;
  223. width: 100%;
  224. cursor: pointer;
  225. transition: all 0.2s ease;
  226. }
  227. .innercont .body .form .insubmit:hover {
  228. background-color: #ffffff;
  229. color: #8ec640;
  230. }
  231. .innercont .body .form .ios_style { -webkit-appearance: none; }
  232. .innercont .body .form input:focus,
  233. .innercont .body .form input:valid,
  234. .innercont .body textarea:focus,
  235. .innercont .body textarea:valid {
  236. box-shadow: none;
  237. outline: none;
  238. background-position: 0 0;
  239. }
  240. .innercont .body textarea {
  241. float: middle;
  242. display: inline-block;
  243. resize: none;
  244. background-color: #dfdfdf;
  245. color: #8ec640;
  246. width: 100%;
  247. height: 200px;
  248. font-family: arial;
  249. font-size: 13px;
  250. padding: 13px 5px;
  251. box-sizing: border-box;
  252. border: 0;
  253. }
  254. .innercont .body .form .option_area {
  255. position: relative;
  256. display: inline-block;
  257. width: 200px;
  258. font-family: sans-serif;
  259. font-size: 15px;
  260. text-align: left;
  261. color: #aea9b1;
  262. font-size: 13px;
  263. border: none;
  264. padding: 0px 5px;
  265. margin: 3px 0;
  266. background-color: #dfdfdf;
  267. border-radius: 2px;
  268. font-family: arial;
  269. box-sizing: border-box;
  270. float: left;
  271. width: 100%;
  272. }
  273. .innercont .body .form .option_area .opt {
  274. position: relative;
  275. display: inline-block;
  276. width: auto;
  277. margin: 0 5px;
  278. padding: 10px 0 10px 5px;
  279. color: #676767;
  280. }
  281. .innercont .body .form .question-splitter {
  282. position: relative;
  283. display: inline-block;
  284. height: 0px;
  285. width: 100%;
  286. margin: 15px 0;
  287. }
  288. .innercont .body .form .option_area input {
  289. position:relative;
  290. display: inline-block;
  291. font-size: 13px;
  292. padding: 0;
  293. margin: 0;
  294. width: auto;
  295. }
  296. /*tooltip*/
  297. [data-tip] {
  298. position:relative;
  299. }
  300. [data-tip]:before {
  301. content:'';
  302. /* hides the tooltip when not hovered */
  303. display:none;
  304. content:'';
  305. border-left: 5px solid transparent;
  306. border-right: 5px solid transparent;
  307. border-bottom: 5px solid #1a1a1a;
  308. position:absolute;
  309. top:30px;
  310. left:35px;
  311. z-index:8;
  312. font-size:0;
  313. line-height:0;
  314. width:0;
  315. height:0;
  316. }
  317. [data-tip]:after {
  318. display:none;
  319. content:attr(data-tip);
  320. position:absolute;
  321. top:35px;
  322. left:0px;
  323. padding:5px 8px;
  324. background:#1a1a1a;
  325. color:#fff;
  326. z-index:9;
  327. font-size: 0.75em;
  328. height:18px;
  329. line-height:18px;
  330. -webkit-border-radius: 3px;
  331. -moz-border-radius: 3px;
  332. border-radius: 3px;
  333. white-space:nowrap;
  334. word-wrap:normal;
  335. }
  336. [data-tip]:hover:before,
  337. [data-tip]:hover:after {
  338. display:block;
  339. }
  340. .innercont .body .form .hiddencontainer {
  341. position: relative;
  342. display: inline-block;
  343. width: 100%;
  344. }
  345. .innercont .body .form .hiddencontainer.hidden {
  346. display: none;
  347. }
  348.  
  349.  
  350. .innercont .body .pagebuttons {
  351. position: relative;
  352. display: inline-block;
  353. float: left;
  354. width: 100%;
  355. }
  356. .innercont .body .fbtn {
  357. position: relative;
  358. display: inline-block;
  359. padding: 10px 20px;
  360. background-color: #8ec640;
  361. color: #ffffff;
  362. font-size: 14px;
  363. font-weight: bold;
  364. font-family: sans-serif;
  365. cursor: pointer;
  366. }
  367. .innercont .body .fbtn.back { float: left; }
  368. .innercont .body .fbtn.next { float: right; }
  369. .innercont .body .fbtn.hidden { visibility: hidden; }
  370.  
  371. /* ----------------------------------------------------*/
  372. /* Code That Doesnt Change Between Mobile Resolution */
  373. /* ----------------------------------------------------*/
  374. @media only screen and (min-width : 0px) and (max-width : 992px) {
  375.  
  376. }
  377.  
  378.  
  379. /* ----------------------------------------------------*/
  380. /* Custom, iPhone Retina */
  381. /* ----------------------------------------------------*/
  382. @media only screen and (max-width : 320px) {
  383.  
  384. }
  385.  
  386.  
  387. /* ----------------------------------------------------*/
  388. /* Extra Small Devices, Phones */
  389. /* ----------------------------------------------------*/
  390. @media only screen and (min-width : 320px) and (max-width : 480px) {
  391.  
  392.  
  393. }
  394.  
  395.  
  396. /* ----------------------------------------------------*/
  397. /* Small Devices, Tablets */
  398. /* ----------------------------------------------------*/
  399. @media only screen and (min-width : 480px) and (max-width : 768px) {
  400.  
  401.  
  402. }
  403.  
  404.  
  405. /* ----------------------------------------------------*/
  406. /* Medium Devices, Desktops */
  407. /* ----------------------------------------------------*/
  408. @media only screen and (min-width : 768px) and (max-width : 992px) {
  409.  
  410.  
  411. }
  412.  
  413.  
  414. /* ----------------------------------------------------*/
  415. /* Large Devices, Wide Screens */
  416. /* ----------------------------------------------------*/
  417. @media only screen and (min-width : 992px) and (max-width : 1200px) {
  418.  
  419.  
  420. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!