API tools faq
paste
RyanEarnshaw

Untitled

RyanEarnshaw
Feb 23rd, 2017
75
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.46 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. .backgroundimage {
  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 img {
  49. position: absolute;
  50. bottom: 0;
  51. left: 0;
  52. float: none;
  53. width: 100%;
  54. }
  55.  
  56. .topcontainer {
  57. position: absolute;
  58. display: inline-block;
  59. background-color: #ffffff;
  60. z-index: 10;
  61. top: 55vh;
  62. left: 0;
  63. right: 0;
  64. bottom: 0;
  65. height: 35vh;
  66. width: 60%;
  67. margin: 0 auto;
  68. }
  69. .topcontainer .left,
  70. .topcontainer .right {
  71. position: relative;
  72. display: inline-block;
  73. float: left;
  74. width: 50%;
  75. height: 100%;
  76. padding: 5% 5%;
  77. box-sizing: border-box;
  78. }
  79. .topcontainer .right { text-align: center; }
  80.  
  81.  
  82. .topcontainer .left h1 {
  83. display: inline-block;
  84. color: rgba(0,0,0,0.8);
  85. line-height: 26px;
  86. font-size: 18px;
  87. font-weight: bold;
  88. font-family: sans-serif;
  89. }
  90. .topcontainer .left h2 {
  91. display: inline-block;
  92. color: rgba(0,0,0,0.8);
  93. line-height: 40px;
  94. font-size: 12px;
  95. font-weight: 100;
  96. font-family: sans-serif;
  97. }
  98. .topcontainer .left .findoutmorebutton {
  99. position: relative;
  100. display: inline-block;
  101. text-decoration: none;
  102. }
  103. .topcontainer .left h3 {
  104. display: inline-block;
  105. color: #ffffff;
  106. font-size: 16px;
  107. font-family: sans-serif;
  108. font-weight: 600;
  109. background-color: #8ec640;
  110. padding: 12px 18px;
  111. margin-top: 15px;
  112. }
  113. .topcontainer .left .findoutmorebutton span{
  114. position: absolute;
  115. display: inline-block;
  116. color: #ffffff;
  117. font-size: 16px;
  118. font-family: sans-serif;
  119. font-weight: 600;
  120. background-color: #8ec640;
  121. padding: 12px 18px 12px 0px;
  122. margin-top: 15px;
  123. right: -25px;
  124. top: 0;
  125. transition: padding 0.5s ease;
  126. }
  127. .topcontainer .left .findoutmorebutton:hover span {
  128. padding: 12px 10px 12px 8px;
  129. }
  130.  
  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. .topcontainer .right h1 {
  145. display: inline-block;
  146. color: rgba(0,0,0,0.6);
  147. font-size: 22px;
  148. margin-bottom: 10px;
  149. font-weight: 200;
  150. font-family: sans-serif;
  151. }
  152. .topcontainer .right h2 {
  153. display: inline-block;
  154. color: rgba(0,0,0,0.4);
  155. font-size: 14px;
  156. font-weight: 100;
  157. font-family: sans-serif;
  158. }
  159. .leftbuttonarrowcontainer, .rightbuttonarrowcontainer {
  160. position: relative;
  161. display: inline-block;
  162. width: 10%;
  163. height: 100%;
  164. float: left;
  165. }
  166. .leftbuttonarrow, .rightbuttonarrow{
  167. position: absolute;
  168. top: 50%;
  169. left: 50%;
  170. transform: translate(-50%, -50%);
  171. width: 100%;
  172. z-index: 5;
  173. }
  174. .leftbuttonarrow img, .rightbuttonarrow img{
  175. width: 100%;
  176. }
  177.  
  178. .topcontainer .right .carouselcontainer {
  179. position: relative;
  180. display: inline-block;
  181. width: 100%;
  182. height: 72%;
  183. margin: 10% auto;
  184. }
  185. .quotecontainer {
  186. position: relative;
  187. display: inline-block;
  188. width: 80%;
  189. height: 100%;
  190. float: left;
  191. overflow: hidden;
  192. }
  193. .quote {
  194. display: inline-block;
  195. position: absolute;
  196. height: 100%;
  197. width: 100%;
  198. left: 0;
  199. top: 0;
  200. font-size: 18px;
  201. line-height: 25px;
  202. color: rgba(0,0,0,0.4);
  203. }
  204. .quote img {
  205. position: absolute;
  206. bottom: 0;
  207. left: 50%;
  208. transform: translateX(-50%);
  209. width: 50%;
  210. }
  211. .timelinecontainer {
  212. position: absolute;
  213. display: inline-block;
  214. background-color: #8ec640;
  215. z-index: 10;
  216. top: 90vh;
  217. left: 0;
  218. right: 0;
  219. bottom: 0;
  220. height: 10vh;
  221. width: 100%;
  222. margin: 0 auto;
  223. text-align: center;
  224. }
  225. .timelinecontainer .title {
  226. position: relative;
  227. display:table;
  228. width: 100%;
  229. height: 49%;
  230. margin: auto;
  231. text-align: center;
  232. }
  233. .timelinecontainer .title h1 {
  234. position: relative;
  235. display:inline-block;
  236. font-family: sans-serif;
  237. font-size: 25px;
  238. font-weight: bolf;
  239. color: #ffffff;
  240. margin: auto;
  241. vertical-align: middle;
  242. width: 100%;
  243. }
  244. .timelinecontainer .title h2 {
  245. position: relative;
  246. display:inline-block;
  247. font-family: sans-serif;
  248. font-size: 15px;
  249. font-weight: 100;
  250. color: #ffffff;
  251. margin: auto;
  252. margin-bottom: 10px;
  253. vertical-align: middle;
  254. width: 100%;
  255. }
  256. .timelinecontainer .date {
  257. position: relative;
  258. display: inline-block;
  259. font-size: 1.5vh;
  260. font-weight: 100;
  261. font-family: sans-serif;
  262. color: #ffffff;
  263. background-color: #7aac34;
  264. text-align: center;
  265. width: 7%;
  266. padding-top: 10px;
  267. padding-bottom: 10px;
  268. transition: all 0.1s ease;
  269. cursor: default;
  270. }
  271. .timelinecontainer .date.selected {
  272. background-color: #ffffff;
  273. color: #7aac34;
  274. padding-bottom: 4%;
  275. transition: all 0.5s ease;
  276. }
  277.  
  278. .timelinedatacontainer {
  279. position: relative;
  280. display: inline-block;
  281. width: 80%;
  282. height: 0px;
  283. transition: height 1s ease;
  284. margin: 0 10% 100px 10%;
  285. background-color: #ffffff;
  286. text-align: center;
  287. z-index: 11;
  288. }
  289. .timelinedatacontainer .datacontainer {
  290. display: none;
  291. }
  292. .timelinedatacontainer.open {
  293. height: auto;
  294. }
  295. .timelinedatacontainer.open .datacontainer {
  296. display: none;
  297. display: inline-block;
  298. }
  299. .datacontainer {
  300. position: relative;
  301. float: left;
  302. width: 100%;
  303. padding: 50px 10px;
  304. font-family: sans-serif;
  305. font-weight: 100;
  306. font-size: 14px;
  307. color: rgba(0,0,0,0.4);
  308. background-color: transparent;
  309. opacity: 1;
  310. transition: opacity 0.5s ease 1s;
  311. overflow: hidden;
  312. text-align: center;
  313. box-sizing: border-box;
  314. }
  315. .datacontainer.hidden {
  316. transition: opacity 0.5s ease 0s, left 1s ease 0.5s;
  317. opacity: 0;
  318. margin-left: -9999vw;
  319. }
  320. .datacontainer .closebutton {
  321. position: absolute;
  322. display: inline-block;
  323. top: 5px;
  324. right: 10px;
  325. font-size: 25px;
  326. font-family: sans-serif;
  327. font-weight: 100;
  328. color: #8ec640;
  329. cursor: default;
  330. }
  331. .datacontainer .timelineevent {
  332. position: relative;
  333. display: inline-block;
  334. width: 250px;
  335. height: 250px;
  336. margin: 0 10px;
  337. border: 1px solid #8ec640;
  338. vertical-align: top;
  339. }
  340. .datacontainer .timelineevent img {
  341. margin-top: 10px;
  342. max-width: 90%;
  343. max-height: 50%;
  344. }
  345. .datacontainer .timelineevent h1 {
  346. margin-bottom: 10px;
  347. margin-top: 10px;
  348. margin-left: 5%;
  349. padding-top: 10px;
  350. width: 90%;
  351. font-weight: 100;
  352. font-family: sans-serif;
  353. font-size: 18px;
  354. color: #8ec640;
  355. border-top: 1px solid #8ec640;
  356. }
  357.  
  358.  
  359.  
  360.  
  361. /* MEDIA QUERIES */
  362.  
  363.  
  364.  
  365. /* ----------------------------------------------------*/
  366. /* Code That Doesnt Change Between Mobile Resolution */
  367. /* ----------------------------------------------------*/
  368. @media only screen and (min-width : 0px) and (max-width : 992px) {
  369. .backgroundimage img { top: 0; height: 60vh; min-width: 100%; width: auto; }
  370. .topcontainer { width: 100%; margin: 0; }
  371. }
  372.  
  373.  
  374. /* ----------------------------------------------------*/
  375. /* Custom, iPhone Retina */
  376. /* ----------------------------------------------------*/
  377. @media only screen and (max-width : 320px) {
  378. .bodycontainer { position: relative; }
  379. .topcontainer { top: 55vh; left: 0; right: 0; bottom: 0; height: auto; }
  380. .topcontainer .left { width: 70%; height: auto; padding: 5% 0; margin: 0 15%; text-align: center; border-bottom: 2px solid #bdbdbd; }
  381. .topcontainer .right { width: 80%; height: 300px; padding: 5% 0; margin: 0 10%; text-align: center;}
  382. .topcontainer .middle { display: none; }
  383. .timelinecontainer { top: auto; bottom: 0; }
  384. .backgroundimage { height: 125vh; }
  385. .topcontainer .left h3 { margin-left: -30px; }
  386. .topcontainer .left h2 { line-height: 20px; margin-top: 20px; }
  387. .timelinedatacontainer {
  388. width: 100%;
  389. margin: 0 0% 100px 0%;
  390. }
  391.  
  392. }
  393.  
  394.  
  395. /* ----------------------------------------------------*/
  396. /* Extra Small Devices, Phones */
  397. /* ----------------------------------------------------*/
  398. @media only screen and (min-width : 320px) and (max-width : 480px) {
  399. .bodycontainer { position: relative; }
  400. .topcontainer { top: 55vh; left: 0; right: 0; bottom: 0; height: auto; }
  401. .topcontainer .left { width: 70%; height: auto; padding: 5% 0; margin: 0 15%; text-align: center; border-bottom: 2px solid #bdbdbd; }
  402. .topcontainer .right { width: 80%; height: 300px; padding: 5% 0; margin: 0 10%; text-align: center;}
  403. .topcontainer .middle { display: none; }
  404. .timelinecontainer { top: auto; bottom: 0; }
  405. .backgroundimage { height: 10vh;height: 125vh; }
  406. .topcontainer .left h3 { margin-left: -30px; }
  407. .topcontainer .left h2 { line-height: 20px; margin-top: 20px; }
  408. .timelinedatacontainer {
  409. width: 100%;
  410. margin: 0 0% 100px 0%;
  411. }
  412. }
  413.  
  414.  
  415. /* ----------------------------------------------------*/
  416. /* Small Devices, Tablets */
  417. /* ----------------------------------------------------*/
  418. @media only screen and (min-width : 480px) and (max-width : 768px) {
  419. .bodycontainer { position: relative; }
  420. .topcontainer { top: 55vh; left: 0; right: 0; bottom: 0; height: auto; }
  421. .topcontainer .left { width: 70%; height: auto; padding: 5% 0; margin: 0 15%; text-align: center; border-bottom: 2px solid #bdbdbd; }
  422. .topcontainer .right { width: 80%; height: 300px; padding: 5% 0; margin: 0 10%; text-align: center;}
  423. .topcontainer .middle { display: none; }
  424. .timelinecontainer { top: auto; bottom: 0; }
  425. .backgroundimage { height: 125vh; }
  426. .topcontainer .left h3 { margin-left: -30px; }
  427. .timelinedatacontainer {
  428. width: 100%;
  429. margin: 0 0% 100px 0%;
  430. }
  431. }
  432.  
  433.  
  434. /* ----------------------------------------------------*/
  435. /* Medium Devices, Desktops */
  436. /* ----------------------------------------------------*/
  437. @media only screen and (min-width : 768px) and (max-width : 992px) {
  438. .timelinedatacontainer {
  439. width: 100%;
  440. margin: 0 0% 100px 0%;
  441. }
  442. }
  443.  
  444.  
  445. /* ----------------------------------------------------*/
  446. /* Large Devices, Wide Screens */
  447. /* ----------------------------------------------------*/
  448. @media only screen and (min-width : 992px) and (max-width : 1200px) {
  449. .timelinedatacontainer {
  450. width: 100%;
  451. margin: 0 0% 100px 0%;
  452. }
  453. .datacontainer .timelineevent {
  454. margin: 0 20px;
  455. }
  456. }
  457.  
  458. /* ----------------------------------------------------*/
  459. /* SPECIAL DESKTOPS */
  460. /* ----------------------------------------------------*/
  461. @media only screen and (min-width : 1200px) and (max-width : 1350px) {
  462. .timelinedatacontainer {
  463. width: 100%;
  464. margin: 0 0% 100px 0%;
  465. }
  466. .datacontainer .timelineevent {
  467. width: 210px;
  468. height: 240px;
  469. }
  470. }
  471. /* ----------------------------------------------------*/
  472. /* SPECIAL DESKTOPS */
  473. /* ----------------------------------------------------*/
  474. @media only screen and (min-width : 1350px) and (max-width : 1570px) {
  475. .timelinedatacontainer {
  476. width: 90%;
  477. margin: 0 5% 100px 5%;
  478. }
  479. .datacontainer .timelineevent {
  480. width: 210px;
  481. height: 240px;
  482. }
  483. }
  484. /* ----------------------------------------------------*/
  485. /* SPECIAL DESKTOPS */
  486. /* ----------------------------------------------------*/
  487. @media only screen and (min-width : 1570px) and (max-width : 1770px) {
  488. .timelinedatacontainer {
  489. width: 90%;
  490. margin: 0 5% 100px 5%;
  491. }
  492. }
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!