API tools faq
paste
RyanEarnshaw

Untitled

RyanEarnshaw
Feb 23rd, 2017
73
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.59 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. display:table-cell;
  235. font-size: 20px;
  236. color: #ffffff;
  237. margin: auto;
  238. vertical-align: middle;
  239. font-weight: 200;
  240. }
  241. .timelinecontainer .date {
  242. position: relative;
  243. display: inline-block;
  244. font-size: 1.5vh;
  245. font-weight: 100;
  246. font-family: sans-serif;
  247. color: #ffffff;
  248. background-color: #7aac34;
  249. text-align: center;
  250. width: 7%;
  251. padding-top: 0.7%;
  252. padding-bottom: 0.4%;
  253. transition: all 0.1s ease;
  254. cursor: default;
  255. }
  256. .timelinecontainer .date.selected {
  257. background-color: #ffffff;
  258. color: #7aac34;
  259. padding-bottom: 4%;
  260. transition: all 0.5s ease;
  261. }
  262.  
  263. .timelinedatacontainer {
  264. position: relative;
  265. display: inline-block;
  266. width: 80%;
  267. height: 0px;
  268. transition: height 1s ease;
  269. margin: 0 10% 100px 10%;
  270. background-color: #ffffff;
  271. text-align: center;
  272. z-index: 11;
  273. }
  274. .timelinedatacontainer.open {
  275. height: 400px;
  276. }
  277. .datacontainer {
  278. position: absolute;
  279. display: inline-block;
  280. top: 0;
  281. /*match padding*/
  282. bottom: 0;
  283. right: 0;
  284. width: 100%;
  285. padding: 50px 10px;
  286. font-family: sans-serif;
  287. font-weight: 100;
  288. font-size: 14px;
  289. color: rgba(0,0,0,0.4);
  290. background-color: transparent;
  291. opacity: 1;
  292. transition: opacity 0.5s ease 1s;
  293. overflow: hidden;
  294. text-align: center;
  295. box-sizing: border-box;
  296. }
  297. .datacontainer.hidden {
  298. transition: opacity 0.5s ease 0s, left 1s ease 0.5s;
  299. opacity: 0;
  300. left: -9999vw;
  301. }
  302. .datacontainer .closebutton {
  303. position: absolute;
  304. display: inline-block;
  305. top: 5px;
  306. right: 10px;
  307. font-size: 25px;
  308. font-family: sans-serif;
  309. font-weight: 100;
  310. color: #8ec640;
  311. cursor: default;
  312. }
  313. .datacontainer .timelineevent {
  314. position: relative;
  315. display: inline-block;
  316. width: 250px;
  317. height: 250px;
  318. margin: 0 10px;
  319. border: 1px solid #8ec640;
  320. vertical-align: top;
  321. }
  322. .datacontainer .timelineevent img {
  323. margin-top: 10px;
  324. max-width: 90%;
  325. max-height: 50%;
  326. }
  327. .datacontainer .timelineevent h1 {
  328. margin-bottom: 10px;
  329. margin-top: 10px;
  330. margin-left: 5%;
  331. padding-top: 10px;
  332. width: 90%;
  333. font-weight: 100;
  334. font-family: sans-serif;
  335. font-size: 18px;
  336. color: #8ec640;
  337. border-top: 1px solid #8ec640;
  338. }
  339.  
  340.  
  341.  
  342.  
  343. /* MEDIA QUERIES */
  344.  
  345.  
  346.  
  347. /* ----------------------------------------------------*/
  348. /* Code That Doesnt Change Between Mobile Resolution */
  349. /* ----------------------------------------------------*/
  350. @media only screen and (min-width : 0px) and (max-width : 992px) {
  351. .backgroundimage img { top: 0; height: 60vh; min-width: 100%; width: auto; }
  352. .topcontainer { width: 100%; margin: 0; }
  353. }
  354.  
  355.  
  356. /* ----------------------------------------------------*/
  357. /* Custom, iPhone Retina */
  358. /* ----------------------------------------------------*/
  359. @media only screen and (max-width : 320px) {
  360. .bodycontainer { position: relative; }
  361. .topcontainer { top: 55vh; left: 0; right: 0; bottom: 0; height: auto; }
  362. .topcontainer .left { width: 70%; height: auto; padding: 5% 0; margin: 0 15%; text-align: center; border-bottom: 2px solid #bdbdbd; }
  363. .topcontainer .right { width: 80%; height: 300px; padding: 5% 0; margin: 0 10%; text-align: center;}
  364. .topcontainer .middle { display: none; }
  365. .timelinecontainer { top: auto; bottom: 0; }
  366. .backgroundimage { height: 125vh; }
  367. .topcontainer .left h3 { margin-left: -30px; }
  368. .topcontainer .left h2 { line-height: 20px; margin-top: 20px; }
  369.  
  370. }
  371.  
  372.  
  373. /* ----------------------------------------------------*/
  374. /* Extra Small Devices, Phones */
  375. /* ----------------------------------------------------*/
  376. @media only screen and (min-width : 320px) and (max-width : 480px) {
  377. .bodycontainer { position: relative; }
  378. .topcontainer { top: 55vh; left: 0; right: 0; bottom: 0; height: auto; }
  379. .topcontainer .left { width: 70%; height: auto; padding: 5% 0; margin: 0 15%; text-align: center; border-bottom: 2px solid #bdbdbd; }
  380. .topcontainer .right { width: 80%; height: 300px; padding: 5% 0; margin: 0 10%; text-align: center;}
  381. .topcontainer .middle { display: none; }
  382. .timelinecontainer { top: auto; bottom: 0; }
  383. .backgroundimage { height: 10vh;height: 125vh; }
  384. .topcontainer .left h3 { margin-left: -30px; }
  385. .topcontainer .left h2 { line-height: 20px; margin-top: 20px; }
  386. }
  387.  
  388.  
  389. /* ----------------------------------------------------*/
  390. /* Small Devices, Tablets */
  391. /* ----------------------------------------------------*/
  392. @media only screen and (min-width : 480px) and (max-width : 768px) {
  393. .bodycontainer { position: relative; }
  394. .topcontainer { top: 55vh; left: 0; right: 0; bottom: 0; height: auto; }
  395. .topcontainer .left { width: 70%; height: auto; padding: 5% 0; margin: 0 15%; text-align: center; border-bottom: 2px solid #bdbdbd; }
  396. .topcontainer .right { width: 80%; height: 300px; padding: 5% 0; margin: 0 10%; text-align: center;}
  397. .topcontainer .middle { display: none; }
  398. .timelinecontainer { top: auto; bottom: 0; }
  399. .backgroundimage { height: 125vh; }
  400. .topcontainer .left h3 { margin-left: -30px; }
  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. }
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!