API tools faq
paste
RyanEarnshaw

Untitled

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