API tools faq
paste
RyanEarnshaw

Untitled

RyanEarnshaw
Apr 11th, 2017
86
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.01 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. /* padding-bottom: 200px; */
  7. background-color: #ffffff;
  8. float: left;
  9. width: 80%;
  10. }
  11. .headerimage {
  12. position: relative;
  13. display: inline-block;
  14. width: 100%;
  15. height: 300px;
  16. margin: 0;
  17. padding: 0;
  18. overflow: hidden;
  19. }
  20. .headerimage img {
  21. position: absolute;
  22. display: inline-block;
  23. width: 100%;
  24. top: 50%;
  25. transform: translateY(-50%);
  26. right: 0;
  27. }
  28. .headerimage h1 {
  29. position: relative;
  30. display: inline-block;
  31. width: 100%;
  32. font-size: 40px;
  33. font-family: 'Work Sans';
  34. font-weight: 400;
  35. color: #8ec640;
  36. margin: 20px 0 0 20px;
  37. }
  38. .headerimage h1:after {
  39. content: '';
  40. position: absolute;
  41. bottom: -10px;
  42. left: 0;
  43. width: 0px;
  44. height: 2px;
  45. background-color: #8ec640;
  46. animation: underline_animation 1s 0.5s 1 normal forwards;
  47. -o-animation: underline_animation 1s 0.5s 1 normal forwards;
  48. -moz-animation: underline_animation 1s 0.5s 1 normal forwards;
  49. -webkit-animation: underline_animation 1s 0.5s 1 normal forwards;
  50. }
  51. .headerimage h2 {
  52. position: relative;
  53. display: inline-block;
  54. width: 30%;
  55. font-size: 24px;
  56. font-family: 'Work Sans';
  57. font-weight: 400;
  58. margin: 30px 0 0 20px;
  59. color: #000000;
  60. }
  61. .innercont {
  62. position: relative;
  63. display: inline-block;
  64. float: left;
  65. padding: 0vh 5vw 5vh 5vw;
  66. box-sizing: border-box;
  67. background-color: #ffffff;
  68. }
  69.  
  70.  
  71.  
  72. .it-solutions-1 {
  73. position: relative;
  74. display: inline-block;
  75. width: 30%;
  76. float: left;
  77. }
  78. .it-solutions-2 {
  79. position: relative;
  80. display: inline-block;
  81. width: 70%;
  82. float: left;
  83. }
  84.  
  85. .innercont .title {
  86. position: relative;
  87. display: inline-block;
  88. float: left;
  89. width: 100%;
  90. margin: 20px 0 40px;
  91. }
  92. .innercont .title:nth-child(3) {
  93. margin: 90px 0 0px;
  94. }
  95. .innercont .title h1 {
  96. font-size: 40px;
  97. font-family: 'Work Sans';
  98. font-weight: 100;
  99. color: #8ec640;
  100. }
  101. .innercont .title:after {
  102. content: '';
  103. position: absolute;
  104. bottom: -16px;
  105. width: 0px;
  106. height: 2px;
  107. background-color: #8ec640;
  108. animation: underline_animation 1s 0.5s 1 normal forwards;
  109. -o-animation: underline_animation 1s 0.5s 1 normal forwards;
  110. -moz-animation: underline_animation 1s 0.5s 1 normal forwards;
  111. -webkit-animation: underline_animation 1s 0.5s 1 normal forwards;
  112. }
  113. @keyframes underline_animation {
  114. 0% { width: 0px; }
  115. 100% { width: 100px; }
  116. }
  117. @-webkit-keyframes underline_animation {
  118. 0% { width: 0px; }
  119. 100% { width: 100px; }
  120. }
  121. @-moz-keyframes underline_animation {
  122. 0% { width: 0px; }
  123. 100% { width: 100px; }
  124. }
  125. @-o-keyframes underline_animation {
  126. 0% { width: 0px; }
  127. 100% { width: 100px; }
  128. }
  129. .innercont .body {
  130. position: relative;
  131. display: inline-block;
  132. float: left;
  133. width: 100%;
  134. }
  135. .innercont .body .column {
  136. position: relative;
  137. display: inline-block;
  138. height: 100%;
  139. float: left;
  140. }
  141. .innercont .body .column.c1 { width: 30%; margin-right: 5%; }
  142. .innercont .body .column.c2 { width: 65% }
  143. .innercont .body .column.c3 { width: 100% }
  144.  
  145. .innercont .body h2 {
  146. position: relative;
  147. font-size: 17px;
  148. font-family: 'Work Sans';
  149. font-weight: 100;
  150. color: #6b6b6b;
  151. margin: 7px 0;
  152. line-height: 25px;
  153. width: 100%;
  154. float: left;
  155. }
  156. .innercont .body .column.c1 h2 {
  157. font-size: 22px;
  158. }
  159. .innercont .body h2 a {
  160. font-weight: 600;
  161. color: #8ec640;
  162. text-decoration: none;
  163. }
  164. .innercont .body h2 span {
  165. font-size: 24px;
  166. font-family: 'Raleway';
  167. font-weight: 200;
  168. color: #83c640;
  169. }
  170.  
  171. .innercont .body .quote {
  172. position: relative;
  173. display: inline-block;
  174. padding: 10px 0px 10px 0px;
  175. width: 100%;
  176. }
  177. .innercont .body .quote h2 {
  178. position: relative;
  179. display: inline-block;
  180. width: 100%;
  181. line-height: 25px;
  182. font-family: 'Work Sans';
  183. font-size: 23px;
  184. font-weight: 300;
  185. margin-top: 10px;
  186. color: #000000;
  187. text-align: center;
  188. }
  189.  
  190. .body .icons {
  191. position: relative;
  192. display: inline-block;
  193. width: 100%;
  194. float: left;
  195. margin: 60px 0;
  196. }
  197. .body .icons .icon {
  198. position: relative;
  199. display: inline-block;
  200. width: 33%;
  201. padding: 0 2%;
  202. box-sizing: border-box;
  203. float: left;
  204. }
  205. .body .icons .icon img {
  206. position: relative;
  207. display: inline-block;
  208. width: 100%;
  209. padding: 0;
  210. float: left;
  211. }
  212. .body .icons .icon h2 {
  213. position: relative;
  214. display: inline-block;
  215. width: 100%;
  216. font-size: 14px;
  217. font-family: sans-serif;
  218. font-weight: 100;
  219. line-height: 20px;
  220. color: #7c7c7c;
  221. text-align: left;
  222. float: left;
  223. }
  224. .body .icons.it-solutions {
  225. margin: 0;
  226. }
  227. .body .icons.it-solutions .icon h2 {
  228. font-size: 14px;
  229. font-weight: bold;
  230. text-align: center;
  231. float: left;
  232. }
  233.  
  234. .innercont .body .grey-container {
  235. position: relative;
  236. display: inline-block;
  237. width: 100%;
  238. padding: 30px 5vw;
  239. margin-left: -5vw;
  240. background-color: #e3e3e3;
  241. }
  242. .innercont .body .grey-container.extra-margin {
  243. margin-top: 30px;
  244. margin-bottom: 30px;
  245. }
  246. .innercont .body .grey-container.extra-margin-top {
  247. margin-top: 30px;
  248. }
  249. .innercont .body .grey-container.extra-margin-bottom {
  250. margin-bottom: 30px;
  251. }
  252. .innercont .body .grey-container.no-padding {
  253. padding: 0px 5vw;
  254. }
  255.  
  256. .innercont .body .grey-triangle {
  257. position: relative;
  258. display: inline-block;
  259. width: 100%;
  260. float: left;
  261. height: 86px;
  262. margin-bottom: 30px;
  263. }
  264. .innercont .body .grey-triangle .image {
  265. position: relative;
  266. display: inline-block;
  267. height: 86px;
  268. width: 114%;
  269. margin-left: -5vw;
  270. }
  271.  
  272. .innercont .body .description {
  273. font-size: 24px;
  274. width: 100%;
  275. text-align: center;
  276. margin: 0;
  277. }
  278. .innercont .body .heading {
  279. font-size: 28px;
  280. width: 100%;
  281. text-align: center;
  282. margin: 20px 0;
  283. }
  284. .innercont .body .center {
  285. text-align: center;
  286. }
  287. .innercont .body .half-text {
  288. width: 50%;
  289. }
  290. .innercont .body .half-image {
  291. position: relative;
  292. height: 180px;
  293. width: 50%;
  294. }
  295.  
  296. .body .it-solutions-bottom {
  297. position: relative;
  298. display: inline-block;
  299. width: 50%;
  300. float: left;
  301. }
  302.  
  303. .body .cloud-services-image {
  304. position: relative;
  305. display: inline-block;
  306. width: 100%;
  307. }
  308. .body .cloud-offericon-container {
  309. position: relative;
  310. display: inline-block;
  311. margin: 20px 0;
  312. text-align: center;
  313. box-sizing: border-box;
  314. padding: 0 10%;
  315. }
  316. .body .cloud-offericon-container .cloud-offericon {
  317. position: relative;
  318. display: inline-block;
  319. width: 25%;
  320. float: left;
  321. }
  322. .body .cloud-offericon-container .cloud-offericon-image {
  323. position: relative;
  324. display: inline-block;
  325. width: 100%;
  326. float: left;
  327. }
  328. .body .cloud-offericon-container h1 {
  329. position: relative;
  330. font-size: 17px;
  331. font-family: 'Work Sans';
  332. font-weight: 100;
  333. color: #6b6b6b;
  334. margin: 7px 0;
  335. line-height: 25px;
  336. width: 100%;
  337. float: left;
  338. text-align: center;
  339. padding: 0 30px;
  340. box-sizing: border-box;
  341. }
  342. .body .cloud-icon-container {
  343. position: relative;
  344. display: inline-block;
  345. width: 100%;
  346. border: 2px solid #f47d31;
  347. margin-top: 80px;
  348. margin-bottom: 20px;
  349. box-sizing: border-box;
  350. padding: 60px 20px 20px 20px;
  351. }
  352. .body .cloud-icon-container:after {
  353. content: 'Just think how much easier life could be with our cloud services!';
  354. position: absolute;
  355. display: inline-block;
  356. top: -30px;
  357. left: 50%;
  358. transform: translateX(-50%);
  359. font-weight: 200;
  360. font-family: 'Work Sans';
  361. font-size: 30px;
  362. color: #6b6b6b;
  363. text-align: center;
  364. width: 90%;
  365. max-width: 700px;
  366. background-color: #ffffff;
  367. }
  368. .body .cloud-icon-container .icon {
  369. position: relative;
  370. display: inline-block;
  371. width: 33%;
  372. height: 60px;
  373. padding: 0 30px;
  374. margin: 20px 0;
  375. box-sizing: border-box;
  376. vertical-align: top;
  377. }
  378. .body .cloud-icon-container .icon .image {
  379. position: absolute;
  380. display: inline-block;
  381. width: 90px;
  382. }
  383. .body .cloud-icon-container .icon h1 {
  384. position: relative;
  385. display: inline-block;
  386. padding-left: 90px;
  387. color: #595959;
  388. font-family: 'Work Sans';
  389. font-size: 16px;
  390. font-weight: 400;
  391. margin-top: 5px;
  392. }
  393.  
  394.  
  395. .body .it-training-icon-container {
  396. position: relative;
  397. display: inline-block;
  398. width: 100%;
  399. margin-bottom: 20px;
  400. box-sizing: border-box;
  401. padding: 0px 20px 20px 20px;
  402. }
  403. .body .it-training-icon-container .icon {
  404. position: relative;
  405. display: inline-block;
  406. width: 33%;
  407. /* height: 60px; */
  408. padding: 0 30px;
  409. margin: 20px 0;
  410. box-sizing: border-box;
  411. vertical-align: top;
  412. }
  413. .body .it-training-icon-container .icon .image {
  414. position: absolute;
  415. display: inline-block;
  416. width: 90px;
  417. top: 50%;
  418. transform: translateY(-50%);
  419. }
  420. .body .it-training-icon-container .icon h1 {
  421. position: relative;
  422. display: inline-block;
  423. padding-left: 90px;
  424. color: #595959;
  425. font-family: 'Work Sans';
  426. font-size: 16px;
  427. font-weight: 400;
  428. margin-top: 5px;
  429. }
  430.  
  431.  
  432. .body .bullet-list {
  433. position: relative;
  434. display: inline-block;
  435. width: 50%;
  436. float: left;
  437. margin: 30px 0;
  438. }
  439. .body .bullet-list .bullet-title {
  440. position: relative;
  441. font-size: 15px;
  442. font-family: 'Work Sans';
  443. font-weight: bold;
  444. color: #8ec640;
  445. margin: 7px 0;
  446. line-height: 17px;
  447. width: 100%;
  448. float: left;
  449. }
  450. .body .bullet-list .bullet {
  451. position: relative;
  452. font-size: 15px;
  453. font-family: 'Work Sans';
  454. font-weight: 100;
  455. color: #6b6b6b;
  456. margin: 7px 0;
  457. line-height: 17px;
  458. width: 100%;
  459. float: left;
  460. }
  461. .body .bullet-list .bullet span {
  462. position: relative;
  463. display: inline-block;
  464. font-weight: bold;
  465. font-size: 13px;
  466. color: #8ec640;
  467. transform: translateY(-2px);
  468. }
  469.  
  470. .body .bullet-list.orange {
  471. width: 100%;
  472. }
  473. .body .bullet-list.orange .bullet{
  474. width: 100%;
  475. max-width: 500px;
  476. }
  477. .body .bullet-list.orange .bullet span {
  478. color: #f47d31;
  479. font-size: 26px;
  480. transform: rotateZ(45deg) translateY(6px);
  481. }
  482.  
  483.  
  484. .body .case_study_title {
  485. position: relative;
  486. display: inline-block;
  487. width: 100%;
  488. border-bottom: 1px solid #8ec640;
  489. background-color: transparent;
  490. float: left;
  491. margin: 10px 0;
  492. cursor: pointer;
  493. }
  494. .body .case_study_title h2 {
  495. position: relative;
  496. display: inline-block;
  497. margin: 0;
  498. width: 100%;
  499. float: left;
  500. color: #8ec640;
  501. background-color: transparent;
  502. font-size: 14px;
  503. font-family: sans-serif;
  504. font-weight: 100;
  505. padding-bottom: 10px;
  506. }
  507. .body .case_study_title h3 {
  508. position: absolute;
  509. display: inline-block;
  510. right: 30px;
  511. bottom: 10px;
  512. color: #8ec640;
  513. background-color: transparent;
  514. font-size: 14px;
  515. font-family: sans-serif;
  516. font-weight: 100;
  517. }
  518. .body .case_study_title .plus {
  519. position: absolute;
  520. display: inline-block;
  521. right: 0;
  522. top: 0;
  523. color: #8ec640;
  524. background-color: transparent;
  525. font-size: 30px;
  526. font-family: sans-serif;
  527. font-weight: bold;
  528. padding-bottom: 10px;
  529. opacity: 0;
  530. transition: opacity 0.5s ease;
  531. }
  532. .body .case_study_title .minus {
  533. position: absolute;
  534. display: inline-block;
  535. right: 3px;
  536. bottom: 17px;
  537. height: 4px;
  538. width: 13px;
  539. background-color: #8ec640;
  540. opacity: 0;
  541. transition: opacity 0.5s ease;
  542. }
  543. .body .case_study_title .plus.active,
  544. .body .case_study_title .minus.active {
  545. opacity: 1;
  546. }
  547. .body .case_study_container {
  548. position: relative;
  549. display: inline-block;
  550. max-height: 0;
  551. overflow: hidden;
  552. transition: max-height 1s cubic-bezier(0,1,0,1);
  553. }
  554. .body .case_study_container.open {
  555. max-height: 300px;
  556. transition: max-height 1s ease-in-out;
  557. }
  558. .body .case_study_container h1 {
  559. position: relative;
  560. display: inline-block;
  561. margin: 0;
  562. width: 100%;
  563. float: left;
  564. color: #8ec640;
  565. background-color: transparent;
  566. font-size: 14px;
  567. font-family: sans-serif;
  568. font-weight: 100;
  569. padding-top: 10px;
  570. }
  571. .body .case_study_container h2 {
  572. position: relative;
  573. display: inline-block;
  574. margin: 0;
  575. width: 100%;
  576. float: left;
  577. color: #a7a7a7;
  578. background-color: transparent;
  579. font-size: 14px;
  580. font-family: sans-serif;
  581. font-weight: 100;
  582. padding-top: 10px;
  583. }
  584.  
  585.  
  586. .body .it-security-image {
  587. position: relative;
  588. display: inline-block;
  589. width: 80%;
  590. margin:0 10%
  591. }
  592.  
  593. .body .it-training-image {
  594. position: relative;
  595. display: inline-block;
  596. width: 100%;
  597. margin: 10px 0;
  598. }
  599. .body .it-training-image-2 {
  600. position: absolute;
  601. display: inline-block;
  602. height: 100%;
  603. top: 0;
  604. right: 0;
  605. }
  606. .innercont .body .it-training-half-text {
  607. width: 100%;
  608. padding-right: 30vw;
  609. box-sizing: border-box;
  610. }
  611. /* MEDIA QUERIES */
  612.  
  613.  
  614.  
  615. /* ----------------------------------------------------*/
  616. /* Code That Doesnt Change Between Mobile Resolution */
  617. /* ----------------------------------------------------*/
  618. @media only screen and (min-width : 0px) and (max-width : 992px) {
  619. .innercont .body .column.c1 { width: 100%; margin-right: 0; }
  620. .innercont .body .column.c2 { width: 100% }
  621. .body .it-training-image-2 { display: none; }
  622. .innercont .body .it-training-half-text {
  623. width: 100%;
  624. padding-right: 0vw;
  625. text-align: center;
  626. }
  627. }
  628.  
  629.  
  630. /* ----------------------------------------------------*/
  631. /* Custom, iPhone Retina */
  632. /* ----------------------------------------------------*/
  633. @media only screen and (max-width : 320px) {
  634. .body .it-training-icon-container .icon {
  635. width: 100%;
  636. float: left;
  637. }
  638. .body .it-training-icon-container {
  639. padding: 0px 0px 20px 0px;
  640. }
  641.  
  642. .body .icons .icon {
  643. position: relative;
  644. display: inline-block;
  645. width: 100%;
  646. margin: 10px 0;
  647. box-sizing: border-box;
  648. float: left;
  649. background-color: #ffffff;
  650. border: 1px solid #bdbdbd;
  651. }
  652. }
  653.  
  654.  
  655. /* ----------------------------------------------------*/
  656. /* Extra Small Devices, Phones */
  657. /* ----------------------------------------------------*/
  658. @media only screen and (min-width : 320px) and (max-width : 480px) {
  659. .body .it-training-icon-container .icon {
  660. width: 100%;
  661. float: left;
  662. }
  663. .body .it-training-icon-container {
  664. padding: 0px 0px 20px 0px;
  665. }
  666. .body .icons .icon {
  667. position: relative;
  668. display: inline-block;
  669. width: 100%;
  670. margin: 10px 0;
  671. box-sizing: border-box;
  672. float: left;
  673. background-color: #ffffff;
  674. border: 1px solid #bdbdbd;
  675. }
  676. .body .bullet-list {
  677. width: 100%;
  678. margin: 30px 0;
  679. }
  680. }
  681.  
  682.  
  683. /* ----------------------------------------------------*/
  684. /* Small Devices, Tablets */
  685. /* ----------------------------------------------------*/
  686. @media only screen and (min-width : 480px) and (max-width : 768px) {
  687. .body .it-training-icon-container .icon {
  688. width: 100%;
  689. float: left;
  690. }
  691. .body .icons .icon {
  692. position: relative;
  693. display: inline-block;
  694. width: 100%;
  695. margin: 10px 0;
  696. box-sizing: border-box;
  697. float: left;
  698. background-color: #ffffff;
  699. border: 1px solid #bdbdbd;
  700. }
  701. .body .bullet-list {
  702. width: 100%;
  703. margin: 30px 0;
  704. }
  705. }
  706.  
  707.  
  708. /* ----------------------------------------------------*/
  709. /* Medium Devices, Desktops */
  710. /* ----------------------------------------------------*/
  711. @media only screen and (min-width : 768px) and (max-width : 992px) {
  712. .body .it-training-icon-container .icon {
  713. width: 50%;
  714. float: left;
  715. }
  716.  
  717. }
  718.  
  719.  
  720. /* ----------------------------------------------------*/
  721. /* Large Devices, Wide Screens */
  722. /* ----------------------------------------------------*/
  723. @media only screen and (min-width : 992px) and (max-width : 1200px) {
  724. .body .it-training-image-2 { display: none; }
  725. .innercont .body .it-training-half-text {
  726. width: 100%;
  727. padding-right: 0vw;
  728. text-align: center;
  729. }
  730. .body .it-training-icon-container .icon {
  731. width: 50%;
  732. float: left;
  733. }
  734. }
  735.  
  736.  
  737.  
  738. /* ----------------------------------------------------*/
  739. /* SPECIAL */
  740. /* ----------------------------------------------------*/
  741. @media only screen and (min-width : 1200px) and (max-width : 1550px) {
  742. .body .it-training-image-2 { display: none; }
  743. .innercont .body .it-training-half-text {
  744. width: 100%;
  745. padding-right: 0vw;
  746. text-align: center;
  747. }
  748. }
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!