RyanEarnshaw

Untitled

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