API tools faq
paste
Advertisement
RyanEarnshaw

Untitled

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