RyanEarnshaw

Untitled

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