RyanEarnshaw

Untitled

Apr 11th, 2017
100
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.96 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. background-color: #ffffff;
  7. float: left;
  8. width: 80%;
  9. }
  10. .innercont {
  11. position: relative;
  12. display: inline-block;
  13. float: left;
  14. padding: 5vh 5vw;
  15. box-sizing: border-box;
  16. background-color: #ffffff;
  17. }
  18.  
  19.  
  20.  
  21. .innercont .fullimage {
  22. position: relative;
  23. display: inline-block;
  24. width: 100%;
  25. float: left;
  26. }
  27.  
  28. .innercont .title {
  29. position: relative;
  30. display: inline-block;
  31. float: left;
  32. width: 100%;
  33. margin: 20px 0 40px;
  34. }
  35. .innercont .title h1 {
  36. font-size: 40px;
  37. font-family: 'Work Sans';
  38. font-weight: 100;
  39. color: #8ec640;
  40. }
  41. .innercont .title:after {
  42. content: '';
  43. position: absolute;
  44. bottom: -16px;
  45. width: 0px;
  46. height: 2px;
  47. background-color: #8ec640;
  48. animation: underline_animation 1s 0.5s 1 normal forwards;
  49. -o-animation: underline_animation 1s 0.5s 1 normal forwards;
  50. -moz-animation: underline_animation 1s 0.5s 1 normal forwards;
  51. -webkit-animation: underline_animation 1s 0.5s 1 normal forwards;
  52. }
  53. @keyframes underline_animation {
  54. 0% { width: 0px; }
  55. 100% { width: 100px; }
  56. }
  57. @-webkit-keyframes underline_animation {
  58. 0% { width: 0px; }
  59. 100% { width: 100px; }
  60. }
  61. @-moz-keyframes underline_animation {
  62. 0% { width: 0px; }
  63. 100% { width: 100px; }
  64. }
  65. @-o-keyframes underline_animation {
  66. 0% { width: 0px; }
  67. 100% { width: 100px; }
  68. }
  69. .innercont .body {
  70. position: relative;
  71. display: inline-block;
  72. float: left;
  73. width: 100%;
  74. }
  75. .innercont .body .column {
  76. position: relative;
  77. display: inline-block;
  78. height: 100%;
  79. float: left;
  80. }
  81. .innercont .body .column.c1 { width: 30%; margin-right: 5%; }
  82. .innercont .body .column.c2 { width: 65% }
  83.  
  84. .innercont .body h2 {
  85. position: relative;
  86. font-size: 15px;
  87. font-family: 'Work Sans';
  88. font-weight: 100;
  89. color: #6b6b6b;
  90. margin: 7px 0;
  91. line-height: 25px;
  92. width: 100%;
  93. float: left;
  94. }
  95. .innercont .body .column.c1 h2 {
  96. font-weight: bold;
  97. }
  98. .innercont .body h2 a {
  99. font-weight: 600;
  100. color: #8ec640;
  101. text-decoration: none;
  102. }
  103. .innercont .body h2 span {
  104. font-size: 24px;
  105. font-family: 'Raleway';
  106. font-weight: 200;
  107. color: #83c640;
  108. }
  109. .innercont .body .column.c1 .quote {
  110. position: relative;
  111. display: inline-block;
  112. margin-top: 20px;
  113. padding: 5px 0px 10px 0px;
  114. border-top: 2px solid #8ec640;
  115. border-bottom: 2px solid #8ec640;
  116. }
  117. .innercont .body .column.c1 .quote h2 {
  118. width: 100%;
  119. line-height: 25px;
  120. font-size: 13px;
  121. font-weight: 100;
  122. font-family: 'Raleway';
  123. margin-top: 10px;
  124. color: #8ec640;
  125. }
  126. .innercont .body .column.c1 .quote h3 {
  127. font-size: 17px;
  128. font-family: 'Work Sans';
  129. color: #8ec640;
  130. font-weight: 400;
  131. width: 100%;
  132. margin-top: 10px;
  133. }
  134.  
  135. .innercont .body .imagetable {
  136. position: relative;
  137. float: left;
  138. max-width: 100%;
  139. max-height: 30px;
  140. border-collapse: collapse;
  141. margin-top: 15px;
  142. margin-bottom: 40px;
  143. }
  144. .innercont .body .imagetable img {
  145. position: relative;
  146. top: 0;
  147. max-width: 95%;
  148. max-height: 90%;
  149. }
  150. .innercont .body .imagetable .left { width: 50%; }
  151. .innercont .body .imagetable .left img { left: 0; }
  152. .innercont .body .imagetable .right { width: 50%; }
  153. .innercont .body .imagetable .right img { right: 0; }
  154.  
  155.  
  156. .innercont .body .our-approach-icons {
  157. position: relative;
  158. display: inline-block;
  159. width: 100%;
  160. float: left;
  161. }
  162. .innercont .body .our-approach-icons .icon {
  163. position: relative;
  164. display: inline-block;
  165. width: 25%;
  166. float: left;
  167. text-align: center;
  168. }
  169. .innercont .body .our-approach-icons .icon img {
  170. position: relative;
  171. display: inline-block;
  172. width: 70%;
  173. float: none;
  174. }
  175. .innercont .body .our-approach-icons .icon h1 {
  176. position: relative;
  177. display: inline-block;
  178. width: 100%;
  179. font-size: 18px;
  180. font-family: 'Work Sans';
  181. font-weight: 100;
  182. color: #6b6b6b;
  183. margin: 7px 0;
  184. line-height: 25px;
  185. float: none;
  186. }
  187. .innercont .body .our-approach-icons .icon h2 {
  188. position: relative;
  189. display: inline-block;
  190. width: 100%;
  191. font-size: 14px;
  192. float: none;
  193. }
  194.  
  195.  
  196. .innercont .body .contact {
  197. position: relative;
  198. display: inline-block;
  199. width: 100%;
  200. margin: 20px 0;
  201. }
  202. .innercont .body .contact .image-column {
  203. position: relative;
  204. display: inline-block;
  205. width: 25%;
  206. margin-right: 5%;
  207. float: left;
  208. }
  209. .innercont .body .contact .image-column img {
  210. position: relative;
  211. display: inline-block;
  212. width: 100%;
  213. }
  214. .innercont .body .contact .text-column {
  215. position: relative;
  216. display: inline-block;
  217. width: 70%;
  218. float: left;
  219. }
  220. .innercont .body .text-column .contact-title {
  221. font-size: 24px;
  222. margin-bottom: 20px;
  223. }
  224.  
  225.  
  226. .innercont .body .bullet-header {
  227. font-size: 26px;
  228. margin-top: 40px;
  229. }
  230. .innercont .body .bullet-header::before {
  231. content: url('../images/our approach/arrow.png');
  232. position: relative;
  233. display: block;
  234. float: left;
  235. height: 30px;
  236. }
  237. /* MEDIA QUERIES */
  238.  
  239.  
  240.  
  241. /* ----------------------------------------------------*/
  242. /* Code That Doesnt Change Between Mobile Resolution */
  243. /* ----------------------------------------------------*/
  244. @media only screen and (min-width : 0px) and (max-width : 992px) {
  245. .innercont .body .column.c1 { width: 100%; margin-right: 0; }
  246. .innercont .body .column.c2 { width: 100% }
  247. .innercont .body .buttoncontainer { padding: 25px 0; }
  248. .innercont .body .buttoncontainer .ctabutton.but1 { width: 100%; }
  249. .innercont .body .buttoncontainer .ctabutton.but2 { width: 100%; }
  250. .innercont .body .buttoncontainer .ctabutton.but3 { width: 100%; }
  251. }
  252.  
  253.  
  254. /* ----------------------------------------------------*/
  255. /* Custom, iPhone Retina */
  256. /* ----------------------------------------------------*/
  257. @media only screen and (max-width : 320px) {
  258.  
  259. }
  260.  
  261.  
  262. /* ----------------------------------------------------*/
  263. /* Extra Small Devices, Phones */
  264. /* ----------------------------------------------------*/
  265. @media only screen and (min-width : 320px) and (max-width : 480px) {
  266.  
  267. }
  268.  
  269.  
  270. /* ----------------------------------------------------*/
  271. /* Small Devices, Tablets */
  272. /* ----------------------------------------------------*/
  273. @media only screen and (min-width : 480px) and (max-width : 768px) {
  274.  
  275. }
  276.  
  277.  
  278. /* ----------------------------------------------------*/
  279. /* Medium Devices, Desktops */
  280. /* ----------------------------------------------------*/
  281. @media only screen and (min-width : 768px) and (max-width : 992px) {
  282.  
  283. }
  284.  
  285.  
  286. /* ----------------------------------------------------*/
  287. /* Large Devices, Wide Screens */
  288. /* ----------------------------------------------------*/
  289. @media only screen and (min-width : 992px) and (max-width : 1200px) {
  290. .innercont .body .buttoncontainer .ctabutton.but1 { width: 100%; }
  291. .innercont .body .buttoncontainer .ctabutton.but2 { width: 100%; }
  292. .innercont .body .buttoncontainer .ctabutton.but3 { width: 100%; }
  293. }
Advertisement
Add Comment
Please, Sign In to add comment