RyanEarnshaw

Untitled

Apr 5th, 2017
95
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.75 KB | None | 0 0
  1. .bodycontainer {
  2. position: relative;
  3. display: inline-block;
  4. margin-top: 80px; /* size of header */
  5. margin-left: 20%; /* size of side-nav */
  6. /* padding-bottom: 200px; */
  7. background-color: #ffffff;
  8. float: left;
  9. width: 80%;
  10. }
  11. .headerimage {
  12. position: absolute;
  13. display: inline-block;
  14. width: 100%;
  15. height: 220px;
  16. top: 0;
  17. left: 0;
  18. }
  19. .headerimage img {
  20. width: 100%;
  21. height: 100%;
  22. }
  23. .innercont {
  24. position: relative;
  25. display: inline-block;
  26. float: left;
  27. padding: 5vh 5vw;
  28. box-sizing: border-box;
  29. background-color: #ffffff;
  30. }
  31.  
  32.  
  33.  
  34.  
  35.  
  36. .innercont .title {
  37. position: relative;
  38. display: inline-block;
  39. float: left;
  40. width: 100%;
  41. margin: 20px 0 40px;
  42. }
  43. .innercont .title:nth-child(3) {
  44. margin: 90px 0 0px;
  45. }
  46. .innercont .title h1 {
  47. font-size: 40px;
  48. font-family: 'Work Sans';
  49. font-weight: 100;
  50. color: #8ec640;
  51. }
  52. .innercont .title:after {
  53. content: '';
  54. position: absolute;
  55. bottom: -16px;
  56. width: 0px;
  57. height: 2px;
  58. background-color: #8ec640;
  59. animation: underline_animation 1s 0.5s 1 normal forwards;
  60. -o-animation: underline_animation 1s 0.5s 1 normal forwards;
  61. -moz-animation: underline_animation 1s 0.5s 1 normal forwards;
  62. -webkit-animation: underline_animation 1s 0.5s 1 normal forwards;
  63. }
  64. @keyframes underline_animation {
  65. 0% { width: 0px; }
  66. 100% { width: 100px; }
  67. }
  68. @-webkit-keyframes underline_animation {
  69. 0% { width: 0px; }
  70. 100% { width: 100px; }
  71. }
  72. @-moz-keyframes underline_animation {
  73. 0% { width: 0px; }
  74. 100% { width: 100px; }
  75. }
  76. @-o-keyframes underline_animation {
  77. 0% { width: 0px; }
  78. 100% { width: 100px; }
  79. }
  80. .innercont .body {
  81. position: relative;
  82. display: inline-block;
  83. float: left;
  84. width: 100%;
  85. }
  86. .innercont .body .column {
  87. position: relative;
  88. display: inline-block;
  89. height: 100%;
  90. float: left;
  91. }
  92. .innercont .body .column.c1 { width: 30%; margin-right: 5%; }
  93. .innercont .body .column.c2 { width: 65% }
  94. .innercont .body .column.c3 { width: 100% }
  95.  
  96. .innercont .body h2 {
  97. position: relative;
  98. font-size: 15px;
  99. font-family: 'Work Sans';
  100. font-weight: 100;
  101. color: #6b6b6b;
  102. margin: 7px 0;
  103. line-height: 25px;
  104. width: 100%;
  105. float: left;
  106. }
  107. .innercont .body .column.c1 h2 {
  108. font-weight: bold;
  109. }
  110. .innercont .body h2 a {
  111. font-weight: 600;
  112. color: #8ec640;
  113. text-decoration: none;
  114. }
  115. .innercont .body h2 span {
  116. font-size: 24px;
  117. font-family: 'Raleway';
  118. font-weight: 200;
  119. color: #83c640;
  120. }
  121. .innercont .body .column.c1 .quote {
  122. position: relative;
  123. display: inline-block;
  124. margin-top: 20px;
  125. padding: 5px 0px 10px 0px;
  126. border-top: 2px solid #8ec640;
  127. border-bottom: 2px solid #8ec640;
  128. }
  129. .innercont .body .column.c1 .quote h2 {
  130. width: 100%;
  131. line-height: 25px;
  132. font-size: 13px;
  133. font-weight: 100;
  134. font-family: 'Raleway';
  135. margin-top: 10px;
  136. color: #8ec640;
  137. }
  138. .innercont .body .column.c1 .quote h3 {
  139. font-size: 17px;
  140. font-family: 'Work Sans';
  141. color: #8ec640;
  142. font-weight: 400;
  143. width: 100%;
  144. margin-top: 10px;
  145. }
  146. .innercont .body .bullet{
  147. margin: 0;
  148. }
  149.  
  150.  
  151. .innercont .body .quote {
  152. display: inline-block;
  153. padding: 10px 0px 10px 0px;
  154. }
  155. .innercont .body .quote h2 {
  156. width: 100%;
  157. line-height: 25px;
  158. font-family: 'Work Sans';
  159. font-size: 23px;
  160. font-weight: 300;
  161. margin-top: 10px;
  162. color: #000000;
  163. }
  164. .innercont .body .quote h2:before {
  165. content: '"';
  166. position: absolute;
  167. display: block;
  168. line-height: 25px;
  169. font-family: 'Work Sans';
  170. font-size: 43px;
  171. font-weight: bold;
  172. font-style: italic;
  173. left: -25px;
  174. }
  175. .innercont .body .quote h2:after {
  176. content: '"';
  177. position: absolute;
  178. display: block;
  179. line-height: 25px;
  180. font-family: 'Work Sans';
  181. font-size: 43px;
  182. font-weight: bold;
  183. font-style: italic;
  184. right: 0px;
  185. }
  186.  
  187. .body .icons {
  188. position: relative;
  189. display: inline-block;
  190. width: 100%;
  191. float: left;
  192. margin-bottom: 30px;
  193. }
  194. .body .icons .icon {
  195. position: relative;
  196. display: inline-block;
  197. width: 33%;
  198. padding: 0 2%;
  199. box-sizing: border-box;
  200. float: left;
  201. }
  202. .body .icons .icon img {
  203. position: relative;
  204. display: inline-block;
  205. width: 30%;
  206. padding: 0;
  207. float: left;
  208. }
  209. .body .icons .icon h1 {
  210. position: relative;
  211. display: inline-block;
  212. width: 70%;
  213. font-size: 35px;
  214. font-family: 'Work Sans';
  215. font-weight: 400;
  216. line-height: 29px;
  217. margin-top: 15px;
  218. color: #5a5a5a;
  219. text-align: left;
  220. }
  221. .body .icons .icon h2 {
  222. position: relative;
  223. display: inline-block;
  224. width: 100%;
  225. font-size: 14px;
  226. font-family: sans-serif;
  227. font-weight: 100;
  228. line-height: 20px;
  229. color: #7c7c7c;
  230. text-align: left;
  231. float: left;
  232. }
  233.  
  234. .body .imagetable {
  235. position: relative;
  236. float: left;
  237. width: 100%;
  238. border-collapse: collapse;
  239. }
  240. .body .imagetable img {
  241. position: relative;
  242. left: 50%;
  243. transform: translateX(-50%);
  244. max-width: 90%;
  245. max-height: 90%;
  246. }
  247. .body .imagetable .width50 { width: 50%; }
  248.  
  249.  
  250. .body .case_study_title {
  251. position: relative;
  252. display: inline-block;
  253. width: 100%;
  254. border-bottom: 1px solid #8ec640;
  255. background-color: transparent;
  256. float: left;
  257. margin: 10px 0;
  258. cursor: pointer;
  259. }
  260. .body .case_study_title h2 {
  261. position: relative;
  262. display: inline-block;
  263. margin: 0;
  264. width: 100%;
  265. float: left;
  266. color: #8ec640;
  267. background-color: transparent;
  268. font-size: 14px;
  269. font-family: sans-serif;
  270. font-weight: 100;
  271. padding-bottom: 10px;
  272. }
  273. .body .case_study_title h3 {
  274. position: absolute;
  275. display: inline-block;
  276. right: 30px;
  277. bottom: 10px;
  278. color: #8ec640;
  279. background-color: transparent;
  280. font-size: 14px;
  281. font-family: sans-serif;
  282. font-weight: 100;
  283. }
  284. .body .case_study_title .plus {
  285. position: absolute;
  286. display: inline-block;
  287. right: 0;
  288. top: 0;
  289. color: #8ec640;
  290. background-color: transparent;
  291. font-size: 30px;
  292. font-family: sans-serif;
  293. font-weight: bold;
  294. padding-bottom: 10px;
  295. opacity: 0;
  296. transition: opacity 0.5s ease;
  297. }
  298. .body .case_study_title .minus {
  299. position: absolute;
  300. display: inline-block;
  301. right: 3px;
  302. bottom: 17px;
  303. height: 4px;
  304. width: 13px;
  305. background-color: #8ec640;
  306. opacity: 0;
  307. transition: opacity 0.5s ease;
  308. }
  309. .body .case_study_title .plus.active,
  310. .body .case_study_title .minus.active {
  311. opacity: 1;
  312. }
  313. .body .case_study_container {
  314. position: relative;
  315. display: inline-block;
  316. max-height: 0;
  317. overflow: hidden;
  318. transition: max-height 1s cubic-bezier(0,1,0,1);
  319. }
  320. .body .case_study_container.open {
  321. max-height: 300px;
  322. transition: max-height 1s ease-in-out;
  323. }
  324. .body .case_study_container h1 {
  325. position: relative;
  326. display: inline-block;
  327. margin: 0;
  328. width: 100%;
  329. float: left;
  330. color: #8ec640;
  331. background-color: transparent;
  332. font-size: 14px;
  333. font-family: sans-serif;
  334. font-weight: 100;
  335. padding-top: 10px;
  336. }
  337. .body .case_study_container h2 {
  338. position: relative;
  339. display: inline-block;
  340. margin: 0;
  341. width: 100%;
  342. float: left;
  343. color: #a7a7a7;
  344. background-color: transparent;
  345. font-size: 14px;
  346. font-family: sans-serif;
  347. font-weight: 100;
  348. padding-top: 10px;
  349. }
  350.  
  351.  
  352.  
  353. /* MEDIA QUERIES */
  354.  
  355.  
  356.  
  357. /* ----------------------------------------------------*/
  358. /* Code That Doesnt Change Between Mobile Resolution */
  359. /* ----------------------------------------------------*/
  360. @media only screen and (min-width : 0px) and (max-width : 992px) {
  361. .innercont .body .column.c1 { width: 100%; margin-right: 0; }
  362. .innercont .body .column.c2 { width: 100% }
  363. }
  364.  
  365.  
  366. /* ----------------------------------------------------*/
  367. /* Custom, iPhone Retina */
  368. /* ----------------------------------------------------*/
  369. @media only screen and (max-width : 320px) {
  370.  
  371. }
  372.  
  373.  
  374. /* ----------------------------------------------------*/
  375. /* Extra Small Devices, Phones */
  376. /* ----------------------------------------------------*/
  377. @media only screen and (min-width : 320px) and (max-width : 480px) {
  378.  
  379. }
  380.  
  381.  
  382. /* ----------------------------------------------------*/
  383. /* Small Devices, Tablets */
  384. /* ----------------------------------------------------*/
  385. @media only screen and (min-width : 480px) and (max-width : 768px) {
  386.  
  387. }
  388.  
  389.  
  390. /* ----------------------------------------------------*/
  391. /* Medium Devices, Desktops */
  392. /* ----------------------------------------------------*/
  393. @media only screen and (min-width : 768px) and (max-width : 992px) {
  394.  
  395. }
  396.  
  397.  
  398. /* ----------------------------------------------------*/
  399. /* Large Devices, Wide Screens */
  400. /* ----------------------------------------------------*/
  401. @media only screen and (min-width : 992px) and (max-width : 1200px) {
  402. .innercont .body .buttoncontainer .ctabutton h1 { width: 70%; }
  403. .innercont .body .buttoncontainer .ctabutton.but3 { height: 70px; width: 100%; margin-right: 0; }
  404. }
Advertisement
Add Comment
Please, Sign In to add comment