RyanEarnshaw

Untitled

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