API tools faq
paste
RyanEarnshaw

Untitled

RyanEarnshaw
Feb 28th, 2017
72
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.21 KB | None | 0 0
raw download clone embed print report
  1. @import url('https://fonts.googleapis.com/css?family=Raleway:100,200,300,400');
  2. /*
  3. animation-name: stretch;
  4. animation-duration: 1.5s;
  5. animation-timing-function: ease-out;
  6. animation-delay: 0;
  7. animation-direction: alternate;
  8. animation-iteration-count: infinite;
  9. animation-fill-mode: none;
  10. animation-play-state: running;
  11.  
  12. animation: name, duration, timing-function, delay, iteration-count, direction, fill-mode, play-state;
  13. animation: name duration delay interations direction fillmode;
  14. */
  15. * {
  16. margin:0;
  17. padding:0;
  18. }
  19.  
  20.  
  21. .navigation a { float: none; margin: 52px 20px 0 20px; width: 200px; vertical-align: top; }
  22. .header .navigation .line { float: none; margin: 60px 0px 0px 0px; height: 60px; }
  23. .navigation a:nth-child(1) h1 { color: #8ec640; font-weight: bold; }
  24. .navigation a:nth-child(3) h1 { color: #8ec640; font-weight: bold; }
  25. .navigation a:nth-child(5) h1 { color: #8ec640; font-weight: bold; }
  26. .navigation a h2 { color: #8b8b8b; font-weight: 100; font-family: sans-serif; font-size: 12px; margin-top: 10px;}
  27. .navigation .navigation-two a h1 { color: rgba(108,108,108,1); font-weight: bold; font-size: 14px; }
  28. .navigation .navigation-two a { margin: 77px 10px 0 0px; width: auto; transition: margin 0.5s 0.1s ease; }
  29. .navigation .navigation-two a.toggled { margin: 110px 10px 0 0px; transition: margin 0.5s ease; }
  30. .navigation-two {
  31. position: absolute;
  32. display: inline-block;
  33. top: -50px;
  34. right: 0;
  35. }
  36. .navigation { text-align: center; }
  37.  
  38. .background {
  39. position: relative;
  40. display: inline-block;
  41. width: 100%;
  42. height: 90vh;
  43. margin-top: 10vh;
  44. text-align: center;
  45. overflow: hidden;
  46. z-index: 1;
  47. }
  48. .backgroundimage {
  49. position: absolute;
  50. bottom: 0;
  51. left: 0;
  52. float: none;
  53. min-width: 100%;
  54. min-height: 100%;
  55. }
  56.  
  57. .insidecontainer {
  58. position: absolute;
  59. display: inline-block;
  60. bottom: 0;
  61. left: 0;
  62. width: 100%;
  63. }
  64.  
  65. .insidecontainer .topcontainer {
  66. position: relative;
  67. display: inline-block;
  68. background-color: #ffffff;
  69. z-index: 10;
  70. width: 60%;
  71. margin: 0 auto;
  72. vertical-align: bottom;
  73. }
  74. .insidecontainer .topcontainer .left {
  75. position: relative;
  76. display: inline-block;
  77. float: left;
  78. width: 50%;
  79. height: 100%;
  80. padding: 5% 5%;
  81. box-sizing: border-box;
  82. text-align: left;
  83. }
  84. .topcontainer .left h1 {
  85. display: inline-block;
  86. color: rgba(0,0,0,0.8);
  87. line-height: 26px;
  88. font-size: 18px;
  89. font-weight: bold;
  90. font-family: sans-serif;
  91. }
  92. .topcontainer .left h2 {
  93. display: inline-block;
  94. color: rgba(0,0,0,0.8);
  95. line-height: 20px;
  96. margin: 20px 0;
  97. font-size: 12px;
  98. font-weight: 100;
  99. font-family: sans-serif;
  100. }
  101. .topcontainer .left .findoutmorebutton {
  102. position: relative;
  103. display: inline-block;
  104. text-decoration: none;
  105. }
  106. .topcontainer .left h3 {
  107. display: inline-block;
  108. color: #ffffff;
  109. font-size: 16px;
  110. font-family: sans-serif;
  111. font-weight: 600;
  112. background-color: #8ec640;
  113. padding: 12px 18px;
  114. margin-top: 15px;
  115. }
  116. .topcontainer .left .findoutmorebutton img {
  117. position: absolute;
  118. display: inline-block;
  119. color: #ffffff;
  120. background-color: #8ec640;
  121. padding: 12px 18px 12px 0px;
  122. margin-top: 15px;
  123. height: 18px;
  124. right: -25px;
  125. top: 0;
  126. transition: right 0.3s ease, padding 0.3s ease;
  127. }
  128. .topcontainer .left .findoutmorebutton:hover img {
  129. padding: 12px 8px 12px 10px;
  130. right: -24px;
  131. }
  132. .topcontainer .middle {
  133. display: inline-block;
  134. position: absolute;
  135. width: 1px;
  136. height: 70%;
  137. top: 15%;
  138. bottom: 0;
  139. left: 50%;
  140. right: 0;
  141. background-color: rgba(0,0,0,0.2);
  142. }
  143.  
  144. .insidecontainer .topcontainer .right {
  145. position: relative;
  146. display: inline-block;
  147. float: left;
  148. width: 50%;
  149. height: 100%;
  150. padding: 5% 5%;
  151. box-sizing: border-box;
  152. text-align: center;
  153. }
  154. .topcontainer .right h1 {
  155. display: inline-block;
  156. color: rgba(0,0,0,0.6);
  157. font-size: 22px;
  158. margin-bottom: 10px;
  159. font-weight: 200;
  160. font-family: sans-serif;
  161. }
  162. .topcontainer .right h2 {
  163. display: inline-block;
  164. color: rgba(0,0,0,0.4);
  165. font-size: 14px;
  166. font-weight: 100;
  167. font-family: sans-serif;
  168. }
  169. .topcontainer .right .leftbuttonarrowcontainer,
  170. .topcontainer .right .rightbuttonarrowcontainer {
  171. position: relative;
  172. display: inline-block;
  173. width: 10%;
  174. height: 100%;
  175. float: left;
  176. }
  177. .topcontainer .right .leftbuttonarrow,
  178. .topcontainer .right .rightbuttonarrow {
  179. position: absolute;
  180. top: 50%;
  181. left: 50%;
  182. transform: translate(-50%, -50%);
  183. width: 100%;
  184. z-index: 5;
  185. }
  186. .topcontainer .right .leftbuttonarrow img,
  187. .topcontainer .right .rightbuttonarrow img{
  188. width: 100%;
  189. }
  190. .topcontainer .right .carouselcontainer {
  191. position: relative;
  192. display: inline-block;
  193. width: 100%;
  194. height: 150px;
  195. margin: 10% auto;
  196. }
  197. .quotecontainer {
  198. position: relative;
  199. display: inline-block;
  200. width: 80%;
  201. height: 100%;
  202. float: left;
  203. overflow: hidden;
  204. }
  205. .quotecontainer .quote {
  206. display: inline-block;
  207. position: absolute;
  208. height: 100%;
  209. width: 100%;
  210. left: 0;
  211. top: 0;
  212. font-size: 18px;
  213. line-height: 25px;
  214. color: rgba(0,0,0,0.4);
  215. }
  216. .quotecontainer .quote img {
  217. position: absolute;
  218. display: inline-block;
  219. bottom: 0;
  220. left: 50%;
  221. transform: translateX(-50%);
  222. max-width: 200px;
  223. max-height: 130px;
  224. min-width: auto;
  225. min-height: auto;
  226. }
  227.  
  228.  
  229.  
  230. .timelinecontainer {
  231. position: relative;
  232. display: inline-block;
  233. vertical-align: bottom;
  234. background-color: #8ec640;
  235. z-index: 10;
  236. width: 100%;
  237. margin: 0 auto;
  238. text-align: center;
  239. }
  240. .timelinecontainer .title {
  241. position: relative;
  242. display:table;
  243. width: 100%;
  244. margin: auto;
  245. text-align: center;
  246. }
  247. .timelinecontainer .title h1 {
  248. position: relative;
  249. display:inline-block;
  250. font-family: sans-serif;
  251. font-size: 25px;
  252. font-weight: bold;
  253. color: #ffffff;
  254. margin: auto;
  255. vertical-align: middle;
  256. width: 100%;
  257. }
  258. .timelinecontainer .title h2 {
  259. position: relative;
  260. display:inline-block;
  261. font-family: sans-serif;
  262. font-size: 15px;
  263. font-weight: 100;
  264. color: #ffffff;
  265. margin: auto;
  266. margin-bottom: 10px;
  267. vertical-align: middle;
  268. width: 100%;
  269. }
  270. .timelinecontainer .date {
  271. position: relative;
  272. display: inline-block;
  273. font-size: 1.5vh;
  274. font-weight: 100;
  275. font-family: sans-serif;
  276. color: #ffffff;
  277. background-color: #7aac34;
  278. text-align: center;
  279. width: 7%;
  280. padding-top: 10px;
  281. padding-bottom: 10px;
  282. transition: all 0.1s ease;
  283. cursor: default;
  284. }
  285. .timelinecontainer .date.selected {
  286. background-color: #ffffff;
  287. color: #7aac34;
  288. padding-bottom: 30px;
  289. transition: all 0.5s ease;
  290. }
  291.  
  292. .timelineyear-holder {
  293. position: relative;
  294. display: none;
  295. width: 80%;
  296. height: 0px;
  297. transition: height 1s ease;
  298. margin: 0 10% 0px 10%;
  299. background-color: #ffffff;
  300. text-align: center;
  301. z-index: 11;
  302. }
  303. .timelineyear-holder.open {
  304. display: inline-block;
  305. height: auto;
  306. }
  307. .timelineyear {
  308. position: relative;
  309. float: left;
  310. width: 100%;
  311. padding: 50px 10px;
  312. font-family: sans-serif;
  313. font-weight: 100;
  314. font-size: 14px;
  315. color: rgba(0,0,0,0.4);
  316. background-color: transparent;
  317. opacity: 0;
  318. overflow: hidden;
  319. text-align: center;
  320. box-sizing: border-box;
  321. animation: timelineanimation 1s 0s 1 normal forwards;
  322. }
  323. .timelineyear.hidden {
  324. opacity: 0;
  325. display: none;
  326. }
  327. @keyframes timelineanimation {
  328. 0% { display: none; }
  329. 1% { display: inline-block; opacity: 0; }
  330. 100% { display: inline-block; opacity: 1; }
  331. }
  332. .timelineyear .closebutton {
  333. position: absolute;
  334. display: inline-block;
  335. top: 5px;
  336. right: 10px;
  337. font-size: 25px;
  338. font-family: sans-serif;
  339. font-weight: 100;
  340. color: #8ec640;
  341. cursor: default;
  342. }
  343. .timelineyear .timelineevent {
  344. position: relative;
  345. display: inline-block;
  346. width: 250px;
  347. height: 250px;
  348. margin: 0 10px;
  349. border: 1px solid #8ec640;
  350. vertical-align: top;
  351. }
  352. .timelineyear .timelineevent img {
  353. margin-top: 10px;
  354. max-width: 90%;
  355. max-height: 50%;
  356. }
  357. .timelineyear .timelineevent h1 {
  358. margin-bottom: 10px;
  359. margin-top: 10px;
  360. margin-left: 5%;
  361. padding-top: 10px;
  362. width: 90%;
  363. font-weight: 100;
  364. font-family: sans-serif;
  365. font-size: 18px;
  366. color: #8ec640;
  367. border-top: 1px solid #8ec640;
  368. }
  369.  
  370.  
  371.  
  372.  
  373. /* MEDIA QUERIES */
  374.  
  375.  
  376.  
  377. /* ----------------------------------------------------*/
  378. /* Code That Doesnt Change Between Mobile Resolution */
  379. /* ----------------------------------------------------*/
  380. @media only screen and (min-width : 0px) and (max-width : 992px) {
  381. .background { margin-top: 0; }
  382. .insidecontainer .topcontainer { width: 100%; }
  383. }
  384.  
  385.  
  386. /* ----------------------------------------------------*/
  387. /* Custom, iPhone Retina */
  388. /* ----------------------------------------------------*/
  389. @media only screen and (max-width : 320px) {
  390.  
  391. .timelineyear .timelineevent {
  392. height: auto;
  393. width: 90%;
  394. box-sizing: border-box;
  395. margin: 5% 10px;
  396. }
  397. .insidecontainer .topcontainer .left { width: 100%; text-align: center; border-bottom: 1px solid #d3d3d3;}
  398. .insidecontainer .topcontainer .middle { display: none; }
  399. .insidecontainer .topcontainer .right { width: 100% }
  400. .timelinecontainer .date {
  401. width: 25%;
  402. padding-top: 10px;
  403. padding-bottom: 10px;
  404. }
  405. .backgroundimage {
  406. position: absolute;
  407. bottom: auto;
  408. top: 0;
  409. left: 0;
  410. float: none;
  411. width: 100%;
  412. min-width: auto;
  413. min-height: 60vh;
  414. }
  415. }
  416.  
  417.  
  418. /* ----------------------------------------------------*/
  419. /* Extra Small Devices, Phones */
  420. /* ----------------------------------------------------*/
  421. @media only screen and (min-width : 320px) and (max-width : 480px) {
  422.  
  423. .timelineyear .timelineevent {
  424. height: auto;
  425. width: 90%;
  426. box-sizing: border-box;
  427. margin: 5% 10px;
  428. }
  429. .insidecontainer .topcontainer .left { width: 100%; text-align: center; border-bottom: 1px solid #d3d3d3;}
  430. .insidecontainer .topcontainer .middle { display: none; }
  431. .insidecontainer .topcontainer .right { width: 100% }
  432. .timelinecontainer .date {
  433. width: 25%;
  434. padding-top: 10px;
  435. padding-bottom: 10px;
  436. }
  437. .backgroundimage {
  438. position: absolute;
  439. bottom: auto;
  440. top: 0;
  441. left: 0;
  442. float: none;
  443. width: 100%;
  444. min-width: auto;
  445. min-height: 60vh;
  446. }
  447. }
  448.  
  449.  
  450. /* ----------------------------------------------------*/
  451. /* Small Devices, Tablets */
  452. /* ----------------------------------------------------*/
  453. @media only screen and (min-width : 480px) and (max-width : 768px) {
  454. .timelineyear .timelineevent {
  455. height: auto;
  456. width: 90%;
  457. box-sizing: border-box;
  458. margin: 5% 10px;
  459. }
  460. .insidecontainer .topcontainer .left { width: 100%; text-align: center; border-bottom: 1px solid #d3d3d3;}
  461. .insidecontainer .topcontainer .middle { display: none; }
  462. .insidecontainer .topcontainer .right { width: 100% }
  463. .timelinecontainer .date {
  464. width: 9%;
  465. padding-top: 10px;
  466. padding-bottom: 10px;
  467. }
  468. .backgroundimage {
  469. position: absolute;
  470. bottom: auto;
  471. top: 0;
  472. left: 0;
  473. float: none;
  474. width: 100%;
  475. min-width: auto;
  476. min-height: 60vh;
  477. }
  478. }
  479.  
  480.  
  481. /* ----------------------------------------------------*/
  482. /* Medium Devices, Desktops */
  483. /* ----------------------------------------------------*/
  484. @media only screen and (min-width : 768px) and (max-width : 992px) {
  485. .timelineyear .timelineevent {
  486. margin-bottom: 10px;
  487. }
  488. }
  489.  
  490.  
  491. /* ----------------------------------------------------*/
  492. /* Large Devices, Wide Screens */
  493. /* ----------------------------------------------------*/
  494. @media only screen and (min-width : 992px) and (max-width : 1200px) {
  495. .timelineyear .timelineevent {
  496. margin-bottom: 10px;
  497. }
  498. }
  499.  
  500. /* ----------------------------------------------------*/
  501. /* SPECIAL DESKTOPS */
  502. /* ----------------------------------------------------*/
  503. @media only screen and (min-width : 1200px) and (max-width : 1350px) {
  504. .timelineyear .timelineevent {
  505. margin-bottom: 10px;
  506. }
  507. }
  508. /* ----------------------------------------------------*/
  509. /* SPECIAL DESKTOPS */
  510. /* ----------------------------------------------------*/
  511. @media only screen and (min-width : 1350px) and (max-width : 1515px) {
  512. .timelineyear .timelineevent {
  513. width: 180px;
  514. height: 240px;
  515. }
  516. }
  517. /* ----------------------------------------------------*/
  518. /* SPECIAL DESKTOPS */
  519. /* ----------------------------------------------------*/
  520. @media only screen and (min-width : 1515px) and (max-width : 1770px) {
  521. .timelineyear .timelineevent {
  522. width: 210px;
  523. height: 240px;
  524. }
  525. }
  526.  
  527.  
  528.  
  529.  
  530.  
  531.  
  532.  
  533. /* ----------------------------------------------------*/
  534. /* PHONE HEIGHT */
  535. /* ----------------------------------------------------*/
  536. @media only screen and (min-height : 0px) and (max-height : 400px) { .background { height: 240vh; } }
  537. @media only screen and (min-height : 400px) and (max-height : 450px) { .background { height: 210vh; } }
  538. @media only screen and (min-height : 450px) and (max-height : 500px) { .background { height: 190vh; } }
  539. @media only screen and (min-height : 500px) and (max-height : 600px) { .background { height: 170vh; } }
  540. @media only screen and (min-height : 600px) and (max-height : 700px) { .background { height: 150vh; } }
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!