API tools faq
paste
RyanEarnshaw

Untitled

RyanEarnshaw
Feb 27th, 2017
90
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.10 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: inline-block;
  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. height: auto;
  301. }
  302. .timelineyear-holder.open .datacontainer {
  303. display: none;
  304. display: inline-block;
  305. }
  306. .timelineyear {
  307. position: relative;
  308. float: left;
  309. width: 100%;
  310. padding: 50px 10px;
  311. font-family: sans-serif;
  312. font-weight: 100;
  313. font-size: 14px;
  314. color: rgba(0,0,0,0.4);
  315. background-color: transparent;
  316. opacity: 1;
  317. transition: opacity 0.5s ease 1s;
  318. overflow: hidden;
  319. text-align: center;
  320. box-sizing: border-box;
  321. }
  322. .timelineyear.hidden {
  323. transition: opacity 0.5s ease 0s, left 1s ease 0.5s;
  324. opacity: 0;
  325. margin-left: -9999vw;
  326. }
  327. .timelineyear .closebutton {
  328. position: absolute;
  329. display: inline-block;
  330. top: 5px;
  331. right: 10px;
  332. font-size: 25px;
  333. font-family: sans-serif;
  334. font-weight: 100;
  335. color: #8ec640;
  336. cursor: default;
  337. }
  338. .timelineyear .timelineevent {
  339. position: relative;
  340. display: inline-block;
  341. width: 250px;
  342. height: 250px;
  343. margin: 0 10px;
  344. border: 1px solid #8ec640;
  345. vertical-align: top;
  346. }
  347. .timelineyear .timelineevent img {
  348. margin-top: 10px;
  349. max-width: 90%;
  350. max-height: 50%;
  351. }
  352. .timelineyear .timelineevent h1 {
  353. margin-bottom: 10px;
  354. margin-top: 10px;
  355. margin-left: 5%;
  356. padding-top: 10px;
  357. width: 90%;
  358. font-weight: 100;
  359. font-family: sans-serif;
  360. font-size: 18px;
  361. color: #8ec640;
  362. border-top: 1px solid #8ec640;
  363. }
  364.  
  365.  
  366.  
  367.  
  368. /* MEDIA QUERIES */
  369.  
  370.  
  371.  
  372. /* ----------------------------------------------------*/
  373. /* Code That Doesnt Change Between Mobile Resolution */
  374. /* ----------------------------------------------------*/
  375. @media only screen and (min-width : 0px) and (max-width : 992px) {
  376.  
  377. }
  378.  
  379.  
  380. /* ----------------------------------------------------*/
  381. /* Custom, iPhone Retina */
  382. /* ----------------------------------------------------*/
  383. @media only screen and (max-width : 320px) {
  384.  
  385. }
  386.  
  387.  
  388. /* ----------------------------------------------------*/
  389. /* Extra Small Devices, Phones */
  390. /* ----------------------------------------------------*/
  391. @media only screen and (min-width : 320px) and (max-width : 480px) {
  392.  
  393. }
  394.  
  395.  
  396. /* ----------------------------------------------------*/
  397. /* Small Devices, Tablets */
  398. /* ----------------------------------------------------*/
  399. @media only screen and (min-width : 480px) and (max-width : 768px) {
  400.  
  401. }
  402.  
  403.  
  404. /* ----------------------------------------------------*/
  405. /* Medium Devices, Desktops */
  406. /* ----------------------------------------------------*/
  407. @media only screen and (min-width : 768px) and (max-width : 992px) {
  408.  
  409. }
  410.  
  411.  
  412. /* ----------------------------------------------------*/
  413. /* Large Devices, Wide Screens */
  414. /* ----------------------------------------------------*/
  415. @media only screen and (min-width : 992px) and (max-width : 1200px) {
  416.  
  417. }
  418.  
  419. /* ----------------------------------------------------*/
  420. /* SPECIAL DESKTOPS */
  421. /* ----------------------------------------------------*/
  422. @media only screen and (min-width : 1200px) and (max-width : 1350px) {
  423.  
  424. }
  425. /* ----------------------------------------------------*/
  426. /* SPECIAL DESKTOPS */
  427. /* ----------------------------------------------------*/
  428. @media only screen and (min-width : 1350px) and (max-width : 1570px) {
  429.  
  430. }
  431. /* ----------------------------------------------------*/
  432. /* SPECIAL DESKTOPS */
  433. /* ----------------------------------------------------*/
  434. @media only screen and (min-width : 1570px) and (max-width : 1770px) {
  435.  
  436. }
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!