API tools faq
paste
RyanEarnshaw

Untitled

RyanEarnshaw
Mar 16th, 2017
94
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.27 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: 0;
  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 {
  372. position: relative;
  373. display: inline-block;
  374. width: 250px;
  375. height: 250px;
  376. margin: 0 10px;
  377. border: 1px solid #8ec640;
  378. vertical-align: top;
  379. }
  380. .timelineyear .timelineevent img {
  381. margin-top: 10px;
  382. max-width: 90%;
  383. max-height: 50%;
  384. }
  385. .timelineyear .timelineevent h1 {
  386. margin-bottom: 10px;
  387. margin-top: 10px;
  388. margin-left: 5%;
  389. padding-top: 10px;
  390. width: 90%;
  391. font-weight: 100;
  392. font-family: sans-serif;
  393. font-size: 18px;
  394. color: #8ec640;
  395. border-top: 1px solid #8ec640;
  396. }
  397.  
  398.  
  399.  
  400.  
  401. /* MEDIA QUERIES */
  402.  
  403.  
  404.  
  405. /* ----------------------------------------------------*/
  406. /* Code That Doesnt Change Between Mobile Resolution */
  407. /* ----------------------------------------------------*/
  408. @media only screen and (min-width : 0px) and (max-width : 992px) {
  409. .background { margin-top: 0; }
  410. .insidecontainer .topcontainer { width: 100%; }
  411. .insidecontainer .topcontainer .left { padding-bottom: 10px; }
  412. }
  413.  
  414.  
  415. /* ----------------------------------------------------*/
  416. /* Custom, iPhone Retina */
  417. /* ----------------------------------------------------*/
  418. @media only screen and (max-width : 320px) {
  419.  
  420. .timelineyear .timelineevent {
  421. height: auto;
  422. width: 90%;
  423. box-sizing: border-box;
  424. margin: 5% 10px;
  425. }
  426. .insidecontainer .topcontainer .left { width: 100%; text-align: center; border-bottom: 1px solid #d3d3d3;}
  427. .insidecontainer .topcontainer .middle { display: none; }
  428. .insidecontainer .topcontainer .right { width: 100% }
  429. .timelinecontainer .date {
  430. width: 25%;
  431. padding-top: 10px;
  432. padding-bottom: 10px;
  433. }
  434. .backgroundimage {
  435. position: absolute;
  436. bottom: auto;
  437. top: 0;
  438. left: 0;
  439. float: none;
  440. width: 100%;
  441. min-width: auto;
  442. min-height: 60vh;
  443. }
  444. }
  445.  
  446.  
  447. /* ----------------------------------------------------*/
  448. /* Extra Small Devices, Phones */
  449. /* ----------------------------------------------------*/
  450. @media only screen and (min-width : 320px) and (max-width : 480px) {
  451.  
  452. .timelineyear .timelineevent {
  453. height: auto;
  454. width: 90%;
  455. box-sizing: border-box;
  456. margin: 5% 10px;
  457. }
  458. .insidecontainer .topcontainer .left { width: 100%; text-align: center; border-bottom: 1px solid #d3d3d3; }
  459. .insidecontainer .topcontainer .middle { display: none; }
  460. .insidecontainer .topcontainer .right { width: 100% }
  461. .timelinecontainer .date {
  462. width: 25%;
  463. padding-top: 10px;
  464. padding-bottom: 10px;
  465. }
  466. .backgroundimage {
  467. position: absolute;
  468. bottom: auto;
  469. top: 0;
  470. left: 0;
  471. float: none;
  472. width: 100%;
  473. min-width: auto;
  474. min-height: 60vh;
  475. }
  476. .timelineyear-holder.open {
  477. max-height: 4000px;
  478. }
  479. }
  480.  
  481.  
  482. /* ----------------------------------------------------*/
  483. /* Small Devices, Tablets */
  484. /* ----------------------------------------------------*/
  485. @media only screen and (min-width : 480px) and (max-width : 768px) {
  486. .timelineyear .timelineevent {
  487. height: auto;
  488. width: 90%;
  489. box-sizing: border-box;
  490. margin: 5% 10px;
  491. }
  492. .insidecontainer .topcontainer .left { width: 100%; text-align: center; border-bottom: 1px solid #d3d3d3;}
  493. .insidecontainer .topcontainer .middle { display: none; }
  494. .insidecontainer .topcontainer .right { width: 100% }
  495. .timelinecontainer .date {
  496. width: 9%;
  497. padding-top: 10px;
  498. padding-bottom: 10px;
  499. }
  500. .backgroundimage {
  501. position: absolute;
  502. bottom: auto;
  503. top: 0;
  504. left: 0;
  505. float: none;
  506. width: 100%;
  507. min-width: auto;
  508. min-height: 60vh;
  509. }
  510. .timelineyear-holder.open {
  511. max-height: 4000px;
  512. }
  513. }
  514.  
  515.  
  516. /* ----------------------------------------------------*/
  517. /* Medium Devices, Desktops */
  518. /* ----------------------------------------------------*/
  519. @media only screen and (min-width : 768px) and (max-width : 992px) {
  520. .timelineyear .timelineevent {
  521. margin-bottom: 10px;
  522. }
  523. .timelineyear-holder.open {
  524. max-height: 1000px;
  525. }
  526. }
  527.  
  528.  
  529. /* ----------------------------------------------------*/
  530. /* Large Devices, Wide Screens */
  531. /* ----------------------------------------------------*/
  532. @media only screen and (min-width : 992px) and (max-width : 1200px) {
  533. .navigation a { margin: 52px 10px 0 10px; }
  534. .timelineyear .timelineevent {
  535. margin-bottom: 10px;
  536. }
  537. .timelineyear-holder.open {
  538. max-height: 1000px;
  539. }
  540. }
  541.  
  542. /* ----------------------------------------------------*/
  543. /* SPECIAL DESKTOPS */
  544. /* ----------------------------------------------------*/
  545. @media only screen and (min-width : 1200px) and (max-width : 1350px) {
  546. .timelineyear .timelineevent {
  547. margin-bottom: 10px;
  548. }
  549. }
  550. /* ----------------------------------------------------*/
  551. /* SPECIAL DESKTOPS */
  552. /* ----------------------------------------------------*/
  553. @media only screen and (min-width : 1350px) and (max-width : 1515px) {
  554. .timelineyear .timelineevent {
  555. width: 180px;
  556. height: 240px;
  557. }
  558. }
  559. /* ----------------------------------------------------*/
  560. /* SPECIAL DESKTOPS */
  561. /* ----------------------------------------------------*/
  562. @media only screen and (min-width : 1515px) and (max-width : 1770px) {
  563. .timelineyear .timelineevent {
  564. width: 210px;
  565. height: 240px;
  566. }
  567. }
  568.  
  569.  
  570.  
  571.  
  572.  
  573.  
  574.  
  575. /* ----------------------------------------------------*/
  576. /* PHONE HEIGHT */
  577. /* ----------------------------------------------------*/
  578. @media only screen and (min-height : 0px) and (max-height : 400px) { .background { height: 240vh; } }
  579. @media only screen and (min-height : 400px) and (max-height : 450px) { .background { height: 210vh; } }
  580. @media only screen and (min-height : 450px) and (max-height : 500px) { .background { height: 190vh; } }
  581. @media only screen and (min-height : 500px) and (max-height : 600px) { .background { height: 170vh; } }
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!