RyanEarnshaw

Untitled

Apr 7th, 2017
65
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.18 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: 17px;
  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-size: 22px;
  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 .bullet{
  122. margin: 0;
  123. }
  124.  
  125.  
  126. .innercont .body .quote {
  127. display: inline-block;
  128. padding: 10px 0px 10px 0px;
  129. }
  130. .innercont .body .quote h2 {
  131. width: 100%;
  132. line-height: 25px;
  133. font-family: 'Work Sans';
  134. font-size: 23px;
  135. font-weight: 300;
  136. margin-top: 10px;
  137. color: #000000;
  138. }
  139.  
  140. .body .icons {
  141. position: relative;
  142. display: inline-block;
  143. width: 100%;
  144. float: left;
  145. margin: 60px 0;
  146. }
  147. .body .icons .icon {
  148. position: relative;
  149. display: inline-block;
  150. width: 33%;
  151. padding: 0 2%;
  152. box-sizing: border-box;
  153. float: left;
  154. }
  155. .body .icons .icon img {
  156. position: relative;
  157. display: inline-block;
  158. width: 100%;
  159. padding: 0;
  160. float: left;
  161. }
  162. .body .icons .icon h2 {
  163. position: relative;
  164. display: inline-block;
  165. width: 100%;
  166. font-size: 14px;
  167. font-family: sans-serif;
  168. font-weight: 100;
  169. line-height: 20px;
  170. color: #7c7c7c;
  171. text-align: left;
  172. float: left;
  173. }
  174.  
  175. .innercont .body .grey-container {
  176. position: relative;
  177. display: inline-block;
  178. width: 100%;
  179. padding: 30px 5vw;
  180. left: -5vw;
  181. background-color: #e3e3e3;
  182. }
  183. .innercont .body .description {
  184. font-size: 24px;
  185. width: 100%;
  186. text-align: center;
  187. margin: 0;
  188. }
  189. .innercont .body .heading {
  190. font-size: 28px;
  191. width: 100%;
  192. text-align: center;
  193. margin: 20px 0;
  194. }
  195. .innercont .body .center {
  196. text-align: center;
  197. }
  198. .innercont .body .half-text {
  199. width: 50%;
  200. }
  201.  
  202. .body .bullet-list {
  203. position: relative;
  204. display: inline-block;
  205. width: 50%;
  206. float: left;
  207. margin: 30px 0;
  208. }
  209. .body .bullet-list .bullet-title {
  210. position: relative;
  211. font-size: 15px;
  212. font-family: 'Work Sans';
  213. font-weight: bold;
  214. color: #8ec640;
  215. margin: 7px 0;
  216. line-height: 17px;
  217. width: 100%;
  218. float: left;
  219. }
  220. .body .bullet-list .bullet {
  221. position: relative;
  222. font-size: 15px;
  223. font-family: 'Work Sans';
  224. font-weight: 100;
  225. color: #6b6b6b;
  226. margin: 7px 0;
  227. line-height: 17px;
  228. width: 100%;
  229. float: left;
  230. }
  231. .body .bullet-list .bullet span {
  232. font-weight: bold;
  233. font-size: 10px;
  234. color: #8ec640;
  235. }
  236.  
  237. .body .case_study_title {
  238. position: relative;
  239. display: inline-block;
  240. width: 100%;
  241. border-bottom: 1px solid #8ec640;
  242. background-color: transparent;
  243. float: left;
  244. margin: 10px 0;
  245. cursor: pointer;
  246. }
  247. .body .case_study_title h2 {
  248. position: relative;
  249. display: inline-block;
  250. margin: 0;
  251. width: 100%;
  252. float: left;
  253. color: #8ec640;
  254. background-color: transparent;
  255. font-size: 14px;
  256. font-family: sans-serif;
  257. font-weight: 100;
  258. padding-bottom: 10px;
  259. }
  260. .body .case_study_title h3 {
  261. position: absolute;
  262. display: inline-block;
  263. right: 30px;
  264. bottom: 10px;
  265. color: #8ec640;
  266. background-color: transparent;
  267. font-size: 14px;
  268. font-family: sans-serif;
  269. font-weight: 100;
  270. }
  271. .body .case_study_title .plus {
  272. position: absolute;
  273. display: inline-block;
  274. right: 0;
  275. top: 0;
  276. color: #8ec640;
  277. background-color: transparent;
  278. font-size: 30px;
  279. font-family: sans-serif;
  280. font-weight: bold;
  281. padding-bottom: 10px;
  282. opacity: 0;
  283. transition: opacity 0.5s ease;
  284. }
  285. .body .case_study_title .minus {
  286. position: absolute;
  287. display: inline-block;
  288. right: 3px;
  289. bottom: 17px;
  290. height: 4px;
  291. width: 13px;
  292. background-color: #8ec640;
  293. opacity: 0;
  294. transition: opacity 0.5s ease;
  295. }
  296. .body .case_study_title .plus.active,
  297. .body .case_study_title .minus.active {
  298. opacity: 1;
  299. }
  300. .body .case_study_container {
  301. position: relative;
  302. display: inline-block;
  303. max-height: 0;
  304. overflow: hidden;
  305. transition: max-height 1s cubic-bezier(0,1,0,1);
  306. }
  307. .body .case_study_container.open {
  308. max-height: 300px;
  309. transition: max-height 1s ease-in-out;
  310. }
  311. .body .case_study_container h1 {
  312. position: relative;
  313. display: inline-block;
  314. margin: 0;
  315. width: 100%;
  316. float: left;
  317. color: #8ec640;
  318. background-color: transparent;
  319. font-size: 14px;
  320. font-family: sans-serif;
  321. font-weight: 100;
  322. padding-top: 10px;
  323. }
  324. .body .case_study_container h2 {
  325. position: relative;
  326. display: inline-block;
  327. margin: 0;
  328. width: 100%;
  329. float: left;
  330. color: #a7a7a7;
  331. background-color: transparent;
  332. font-size: 14px;
  333. font-family: sans-serif;
  334. font-weight: 100;
  335. padding-top: 10px;
  336. }
  337.  
  338.  
  339.  
  340. /* MEDIA QUERIES */
  341.  
  342.  
  343.  
  344. /* ----------------------------------------------------*/
  345. /* Code That Doesnt Change Between Mobile Resolution */
  346. /* ----------------------------------------------------*/
  347. @media only screen and (min-width : 0px) and (max-width : 992px) {
  348. .innercont .body .column.c1 { width: 100%; margin-right: 0; }
  349. .innercont .body .column.c2 { width: 100% }
  350. }
  351.  
  352.  
  353. /* ----------------------------------------------------*/
  354. /* Custom, iPhone Retina */
  355. /* ----------------------------------------------------*/
  356. @media only screen and (max-width : 320px) {
  357.  
  358. }
  359.  
  360.  
  361. /* ----------------------------------------------------*/
  362. /* Extra Small Devices, Phones */
  363. /* ----------------------------------------------------*/
  364. @media only screen and (min-width : 320px) and (max-width : 480px) {
  365.  
  366. }
  367.  
  368.  
  369. /* ----------------------------------------------------*/
  370. /* Small Devices, Tablets */
  371. /* ----------------------------------------------------*/
  372. @media only screen and (min-width : 480px) and (max-width : 768px) {
  373.  
  374. }
  375.  
  376.  
  377. /* ----------------------------------------------------*/
  378. /* Medium Devices, Desktops */
  379. /* ----------------------------------------------------*/
  380. @media only screen and (min-width : 768px) and (max-width : 992px) {
  381.  
  382. }
  383.  
  384.  
  385. /* ----------------------------------------------------*/
  386. /* Large Devices, Wide Screens */
  387. /* ----------------------------------------------------*/
  388. @media only screen and (min-width : 992px) and (max-width : 1200px) {
  389.  
  390. }
Advertisement
Add Comment
Please, Sign In to add comment