API tools faq
paste
RyanEarnshaw

Untitled

RyanEarnshaw
Feb 27th, 2017
91
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.73 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. 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: 40px;
  96. font-size: 12px;
  97. font-weight: 100;
  98. font-family: sans-serif;
  99. }
  100. .topcontainer .left .findoutmorebutton {
  101. position: relative;
  102. display: inline-block;
  103. text-decoration: none;
  104. }
  105. .topcontainer .left h3 {
  106. display: inline-block;
  107. color: #ffffff;
  108. font-size: 16px;
  109. font-family: sans-serif;
  110. font-weight: 600;
  111. background-color: #8ec640;
  112. padding: 12px 18px;
  113. margin-top: 15px;
  114. }
  115. .topcontainer .left .findoutmorebutton span{
  116. position: absolute;
  117. display: inline-block;
  118. color: #ffffff;
  119. font-size: 16px;
  120. font-family: sans-serif;
  121. font-weight: 600;
  122. background-color: #8ec640;
  123. padding: 12px 18px 12px 0px;
  124. margin-top: 15px;
  125. right: -25px;
  126. top: 0;
  127. transition: padding 0.5s ease;
  128. }
  129. .topcontainer .left .findoutmorebutton:hover span {
  130. padding: 12px 10px 12px 8px;
  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: 72%;
  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. .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. .quote img {
  217. position: absolute;
  218. bottom: 0;
  219. left: 50%;
  220. transform: translateX(-50%);
  221. width: 50%;
  222. }
  223.  
  224.  
  225.  
  226. .timelinecontainer {
  227. position: relative;
  228. display: inline-block;
  229. vertical-align: bottom;
  230. background-color: #8ec640;
  231. z-index: 10;
  232. width: 100%;
  233. margin: 0 auto;
  234. text-align: center;
  235. }
  236. .timelinecontainer .title {
  237. position: relative;
  238. display:table;
  239. width: 100%;
  240. margin: auto;
  241. text-align: center;
  242. }
  243. .timelinecontainer .title h1 {
  244. position: relative;
  245. display:inline-block;
  246. font-family: sans-serif;
  247. font-size: 25px;
  248. font-weight: bolf;
  249. color: #ffffff;
  250. margin: auto;
  251. vertical-align: middle;
  252. width: 100%;
  253. }
  254. .timelinecontainer .title h2 {
  255. position: relative;
  256. display:inline-block;
  257. font-family: sans-serif;
  258. font-size: 15px;
  259. font-weight: 100;
  260. color: #ffffff;
  261. margin: auto;
  262. margin-bottom: 10px;
  263. vertical-align: middle;
  264. width: 100%;
  265. }
  266. .timelinecontainer .date {
  267. position: relative;
  268. display: inline-block;
  269. font-size: 1.5vh;
  270. font-weight: 100;
  271. font-family: sans-serif;
  272. color: #ffffff;
  273. background-color: #7aac34;
  274. text-align: center;
  275. width: 7%;
  276. padding-top: 10px;
  277. padding-bottom: 10px;
  278. transition: all 0.1s ease;
  279. cursor: default;
  280. }
  281. .timelinecontainer .date.selected {
  282. background-color: #ffffff;
  283. color: #7aac34;
  284. padding-bottom: 30px;
  285. transition: all 0.5s ease;
  286. }
  287.  
  288. .timelineyear-holder {
  289. position: relative;
  290. display: none;
  291. width: 80%;
  292. height: 0px;
  293. transition: height 1s ease;
  294. margin: 0 10% 0px 10%;
  295. background-color: #ffffff;
  296. text-align: center;
  297. z-index: 11;
  298. }
  299. .timelineyear-holder.open {
  300. display: inline-block;
  301. height: auto;
  302. }
  303. .timelineyear {
  304. position: relative;
  305. float: left;
  306. width: 100%;
  307. padding: 50px 10px;
  308. font-family: sans-serif;
  309. font-weight: 100;
  310. font-size: 14px;
  311. color: rgba(0,0,0,0.4);
  312. background-color: transparent;
  313. opacity: 1;
  314. transition: opacity 0.5s ease 1s;
  315. overflow: hidden;
  316. text-align: center;
  317. box-sizing: border-box;
  318. }
  319. .timelineyear.hidden {
  320. transition: opacity 0.5s ease 0s, left 1s ease 0.5s;
  321. opacity: 0;
  322. margin-left: -9999vw;
  323. }
  324. .timelineyear .closebutton {
  325. position: absolute;
  326. display: inline-block;
  327. top: 5px;
  328. right: 10px;
  329. font-size: 25px;
  330. font-family: sans-serif;
  331. font-weight: 100;
  332. color: #8ec640;
  333. cursor: default;
  334. }
  335. .timelineyear .timelineevent {
  336. position: relative;
  337. display: inline-block;
  338. width: 250px;
  339. height: 250px;
  340. margin: 0 10px;
  341. border: 1px solid #8ec640;
  342. vertical-align: top;
  343. }
  344. .timelineyear .timelineevent img {
  345. margin-top: 10px;
  346. max-width: 90%;
  347. max-height: 50%;
  348. }
  349. .timelineyear .timelineevent h1 {
  350. margin-bottom: 10px;
  351. margin-top: 10px;
  352. margin-left: 5%;
  353. padding-top: 10px;
  354. width: 90%;
  355. font-weight: 100;
  356. font-family: sans-serif;
  357. font-size: 18px;
  358. color: #8ec640;
  359. border-top: 1px solid #8ec640;
  360. }
  361.  
  362.  
  363.  
  364.  
  365. /* MEDIA QUERIES */
  366.  
  367.  
  368.  
  369. /* ----------------------------------------------------*/
  370. /* Code That Doesnt Change Between Mobile Resolution */
  371. /* ----------------------------------------------------*/
  372. @media only screen and (min-width : 0px) and (max-width : 992px) {
  373.  
  374. }
  375.  
  376.  
  377. /* ----------------------------------------------------*/
  378. /* Custom, iPhone Retina */
  379. /* ----------------------------------------------------*/
  380. @media only screen and (max-width : 320px) {
  381.  
  382. .timelineyear .timelineevent {
  383. height: auto;
  384. width: 90%;
  385. box-sizing: border-box;
  386. margin: 5% 10px;
  387. }
  388. }
  389.  
  390.  
  391. /* ----------------------------------------------------*/
  392. /* Extra Small Devices, Phones */
  393. /* ----------------------------------------------------*/
  394. @media only screen and (min-width : 320px) and (max-width : 480px) {
  395.  
  396. .timelineyear .timelineevent {
  397. height: auto;
  398. width: 90%;
  399. box-sizing: border-box;
  400. margin: 5% 10px;
  401. }
  402. }
  403.  
  404.  
  405. /* ----------------------------------------------------*/
  406. /* Small Devices, Tablets */
  407. /* ----------------------------------------------------*/
  408. @media only screen and (min-width : 480px) and (max-width : 768px) {
  409. .timelineyear .timelineevent {
  410. height: auto;
  411. width: 90%;
  412. box-sizing: border-box;
  413. margin: 5% 10px;
  414. }
  415. }
  416.  
  417.  
  418. /* ----------------------------------------------------*/
  419. /* Medium Devices, Desktops */
  420. /* ----------------------------------------------------*/
  421. @media only screen and (min-width : 768px) and (max-width : 992px) {
  422. .timelineyear .timelineevent {
  423. margin-bottom: 10px;
  424. }
  425. }
  426.  
  427.  
  428. /* ----------------------------------------------------*/
  429. /* Large Devices, Wide Screens */
  430. /* ----------------------------------------------------*/
  431. @media only screen and (min-width : 992px) and (max-width : 1200px) {
  432. .timelineyear .timelineevent {
  433. margin-bottom: 10px;
  434. }
  435. }
  436.  
  437. /* ----------------------------------------------------*/
  438. /* SPECIAL DESKTOPS */
  439. /* ----------------------------------------------------*/
  440. @media only screen and (min-width : 1200px) and (max-width : 1350px) {
  441. .timelineyear .timelineevent {
  442. margin-bottom: 10px;
  443. }
  444. }
  445. /* ----------------------------------------------------*/
  446. /* SPECIAL DESKTOPS */
  447. /* ----------------------------------------------------*/
  448. @media only screen and (min-width : 1350px) and (max-width : 1515px) {
  449. .timelineyear .timelineevent {
  450. width: 180px;
  451. height: 240px;
  452. }
  453. }
  454. /* ----------------------------------------------------*/
  455. /* SPECIAL DESKTOPS */
  456. /* ----------------------------------------------------*/
  457. @media only screen and (min-width : 1515px) and (max-width : 1770px) {
  458. .timelineyear .timelineevent {
  459. width: 210px;
  460. height: 240px;
  461. }
  462. }
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!