API tools faq
paste
RyanEarnshaw

Untitled

RyanEarnshaw
Mar 17th, 2017
101
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.39 KB | None | 0 0
raw download clone embed print report
  1. @import url('http://fonts.googleapis.com/css?family=Roboto');
  2. @import url('https://fonts.googleapis.com/css?family=Raleway');
  3.  
  4. /*
  5. animation-name: stretch;
  6. animation-duration: 1.5s;
  7. animation-timing-function: ease-out;
  8. animation-delay: 0;
  9. animation-direction: alternate;
  10. animation-iteration-count: infinite;
  11. animation-fill-mode: none;
  12. animation-play-state: running;
  13.  
  14. animation: name, duration, timing-function, delay, iteration-count, direction, fill-mode, play-state;
  15. animation: name duration delay interations direction fillmode;
  16. */
  17. * {
  18. margin:0;
  19. padding:0;
  20. }
  21.  
  22. html, body {
  23. font-family: 'Raleway', sans-serif;
  24. margin:0;
  25. padding:0;
  26. height:auto;
  27. background-color: rgba(232,232,232,1);
  28. }
  29.  
  30. .content {
  31. text-align: center;
  32. }
  33.  
  34. .header {
  35. position: fixed;
  36. display: inline-block;
  37. width: 100vw;
  38. height: 140px;
  39. top: 0;
  40. left: 0;
  41. background-color: #f2f2f2;
  42. border: none;
  43. margin: auto;
  44. float: left;
  45. z-index: 100;
  46. }
  47. .header .logocontainer,
  48. .header .navigation,
  49. .header .navigation-three {
  50. background-color: #f2f2f2;
  51. }
  52.  
  53. .navigation {
  54. display: inline-block;
  55. position: relative;
  56. width: 72%;
  57. height: 100%;
  58. text-decoration: none;
  59. float: left;
  60. z-index: 101;
  61. }
  62. .navigationcontainer {
  63. display: inline-block;
  64. position: absolute;
  65. left: 50%;
  66. transform: translateX(-50%);
  67. width: 750px;
  68. }
  69. .navigation a {
  70. position: relative;
  71. display: inline-block;
  72. text-decoration: none;
  73. color: #000000;
  74. height: 40px;
  75. margin-top: 75px;
  76. margin: 75px 20px 0 20px;
  77. text-align: left;
  78. float: left;
  79. }
  80. .navigation h1 {
  81. margin-top: 10px;
  82. font-size: 16px;
  83. font-weight: 100;
  84. font-family: sans-serif;
  85. color: #8ec640;
  86. }
  87. .navigation a:nth-child(5) h1 { color: rgba(108,108,108,1); }
  88. .navigation a:nth-child(6) h1 { color: rgba(108,108,108,1); }
  89. .navigation a:nth-child(7) h1 { color: rgba(108,108,108,1); }
  90.  
  91.  
  92.  
  93. .side-navigation {
  94. position: absolute;
  95. display: inline-block;
  96. width: 20vw;
  97. background-color: #BCBEC0;
  98. height: 100vh;
  99. z-index: 1;
  100. left: 0;
  101. bottom: -100vh;
  102. }
  103. .side-navigation .buttons {
  104. position: relative;
  105. display: inline-block;
  106. margin: 80px auto;
  107. float: left;
  108. }
  109. .side-navigation .buttons a {
  110. position: relative;
  111. display: inline-block;
  112. margin: 0 0 0 4vw;
  113. float: left;
  114. text-decoration: none;
  115. width: 200px;
  116. }
  117. .side-navigation .buttons a h1 {
  118. position: relative;
  119. display: inline-block;
  120. color: #ffffff;
  121. font-family: sans-serif;
  122. font-weight: 100;
  123. font-size: 14px;
  124. margin: 15px 0 15px 0;
  125. padding: 0 10px;
  126. float: left;
  127. text-decoration: none;
  128. }
  129. .side-navigation .buttons a.selected h1 {
  130. color: rgba(0,0,0,0.6);
  131. }
  132. .side-navigation .shopbuttoncontainer {
  133. position: relative;
  134. display: inline-block;
  135. background-color: rgba(0,0,0,0.3);
  136. width: 100%;
  137. }
  138. .side-navigation .shopbuttoncontainer .shopbutton {
  139. position: relative;
  140. display: inline-block;
  141. float: left;
  142. margin: 30px 0;
  143. width: 100%;
  144. }
  145. .side-navigation .shopbuttoncontainer .shopbutton img {
  146. position: relative;
  147. display: inline-block;
  148. float: left;
  149. margin-left: 4vw;
  150. width: 20px;
  151. }
  152. .side-navigation .shopbuttoncontainer .shopbutton h1 {
  153. position: relative;
  154. display: inline-block;
  155. float: left;
  156. margin-left: 10px;
  157. padding: 2px 0;
  158. font-size: 14px;
  159. font-family: sans-serif;
  160. font-weight: 100;
  161. color: #ffffff;
  162. }
  163. .header .logocontainer {
  164. position: relative;
  165. display: inline-block;
  166. width: 15%;
  167. height: 100%;
  168. float: left;
  169. z-index: 101;
  170. }
  171. .header .logocontainer img {
  172. position: relative;
  173. display: block;
  174. width: 110px;
  175. margin: 0 auto;
  176. margin-top: 30px;
  177. }
  178.  
  179.  
  180. .header .navigation .line {
  181. position: relative;
  182. display: inline-block;
  183. background-color: #000000;
  184. float: left;
  185. margin: 75px 20px 0px 20px;
  186. width: 1px;
  187. height: 35px;
  188. }
  189. .navigation-three {
  190. display: inline-block;
  191. position: relative;
  192. width: 13%;
  193. height: 100%;
  194. text-decoration: none;
  195. float: left;
  196. z-index: 101;
  197. }
  198.  
  199. .navigation-three .searchbar-container {
  200. position: relative;
  201. display: inline-block;
  202. width: 32px;
  203. height: 32px;
  204. background-color: transparent;
  205. box-sizing: border-box;
  206. float: left;
  207. margin: 30px 1% 0;
  208. }
  209. .navigation-three .searchbar {
  210. position: absolute;
  211. display: inline-block;
  212. width: 32px;
  213. height: 32px;
  214. background-color: transparent;
  215. border: 2px solid #8ec640;
  216. box-sizing: border-box;
  217. right: 0;
  218. top: 0;
  219. transition: width 0.5s ease;
  220. }
  221. .navigation-three .searchbar.toggled {
  222. width: 260px;
  223. }
  224. .navigation-three .searchbar img {
  225. position: absolute;
  226. width: 20px;
  227. height: 20px;
  228. top: 5px;
  229. right: 5px;
  230. }
  231. .navigation-three .searchbar input {
  232. position: absolute;
  233. top: 50%;
  234. left: 10px;
  235. width: 0;
  236. font-size: 12px;
  237. font-family: sans-serif;
  238. color: #8ec640;
  239. transform: translateY(-50%);
  240. border: 0;
  241. background-color: transparent;
  242. transition: width 0.5s ease;
  243. }
  244. .navigation-three .searchbar.toggled input {
  245. width: 220px; /* width of search bar extended minus left minus search image*/
  246. }
  247. .navigation-three .searchbar input:focus,
  248. .navigation-three .searchbar input:valid {
  249. box-shadow: none;
  250. outline: none;
  251. background-position: 0 0;
  252. }
  253.  
  254.  
  255. /* Mobile Navigation */
  256. .nav-mobile-options .searchbar-container {
  257. position: relative;
  258. display: inline-block;
  259. width: 100%;
  260. height: 45px;
  261. background-color: transparent;
  262. box-sizing: border-box;
  263. margin: 30px 1% 0;
  264. text-align: center;
  265. }
  266. .nav-mobile-options .searchbar {
  267. position: relative;
  268. display: inline-block;
  269. width: 90%;
  270. height: 45px;
  271. background-color: transparent;
  272. border: 2px solid #8ec640;
  273. box-sizing: border-box;
  274. transition: width 0.5s ease;
  275. }
  276. .nav-mobile-options .searchbar img {
  277. position: absolute;
  278. width: 30px;
  279. height: 30px;
  280. top: 5px;
  281. right: 5px;
  282. }
  283. .nav-mobile-options .searchbar input {
  284. position: absolute;
  285. top: 50%;
  286. left: 10px;
  287. width: 90%;
  288. font-size: 12px;
  289. font-family: sans-serif;
  290. color: #8ec640;
  291. transform: translateY(-50%);
  292. border: 0;
  293. background-color: transparent;
  294. transition: width 0.5s ease;
  295. }
  296. .nav-mobile-options .searchbar input:focus,
  297. .nav-mobile-options .searchbar input:valid {
  298. box-shadow: none;
  299. outline: none;
  300. background-position: 0 0;
  301. }
  302.  
  303. .navigation-three .shopbutton {
  304. position: relative;
  305. display: inline-block;
  306. height: 32px;
  307. background-color: #8ec640;
  308. float: left;
  309. margin: 30px 0 0;
  310. cursor: default;
  311. }
  312. .navigation-three .shopbutton .basket {
  313. width: 20px;
  314. height: 20px;
  315. margin: 5px 5px;
  316. float: left;
  317. }
  318. .navigation-three .shopbutton .arrow {
  319. width: 10px;
  320. height: 10px;
  321. margin: 10px 10px 5px 0;
  322. float: left;
  323. }
  324. .navigation-three .shopbutton h1 {
  325. font-size: 10px;
  326. font-weight: bold;
  327. font-family: sans-serif;
  328. color: #ffffff;
  329. float: left;
  330. width: auto;
  331. margin: 10px 10px 5px 0;
  332. }
  333. .navigation-three .shopbutton:hover .dropdown {
  334. max-height: 300%;
  335. border: 1px solid #8ec640;
  336. transition: max-height 0.5s ease-in-out, border 0s 0s ease;
  337. }
  338. .navigation-three .shopbutton .dropdown {
  339. position: absolute;
  340. display: inline-block;
  341. top: 100%;
  342. left: 0;
  343. width: 100%;
  344. z-index: 15;
  345. overflow: hidden;
  346. max-height: 0%;
  347. border: 0px solid #8ec640;
  348. transition: max-height 0.5s ease-in-out, border 0s 0.5s ease;
  349. box-sizing: border-box;
  350. }
  351. .navigation-three .shopbutton .dropdown .option {
  352. position: relative;
  353. display: inline-block;
  354. height: 30px;
  355. width: 100%;
  356. background-color: #ffffff;
  357. float: left;
  358. box-sizing: border-box;
  359. }
  360. .navigation-three .shopbutton .dropdown .option:hover h1 { color: #8ec640; margin:7px 0px 0 15px; }
  361. .navigation-three .shopbutton .dropdown .option h1 {
  362. font-size: 11px;
  363. font-weight: bold;
  364. font-family: sans-serif;
  365. color: #000000;
  366. float: left;
  367. width: auto;
  368. margin:7px 5px 0 10px;
  369. transition: color 0.2s ease, margin 0.3s ease;
  370. }
  371. .navigation-three .shopbutton .dropdown .option h2 {
  372. position: absolute;
  373. font-size: 14px;
  374. font-weight: bold;
  375. font-family: sans-serif;
  376. color: #000000;
  377. top: 5px;
  378. right: 5px;
  379. }
  380.  
  381.  
  382. .navigation-three .socialbuttons{
  383. position: relative;
  384. display: inline-block;
  385. width: 80%;
  386. margin: 10px 0;
  387. }
  388. .navigation-three .button{
  389. position: relative;
  390. display: inline-block;
  391. width: 30px;
  392. height: 30px;
  393. background-color: transparent;
  394. text-align: center;
  395. float: left;
  396. padding: 0 2%;
  397. }
  398. .navigation-three .button img {
  399. width: 16px;
  400. height: 16px;
  401. float: left;
  402. position: absolute;
  403. left: 12px;
  404. top: 7px;
  405. }
  406. .socialbuttons .button.b1 { border-right: 2px solid #ac5e2c; }
  407. .socialbuttons .button.b2 { border-right: 2px solid #ac5e2c; }
  408. .socialbuttons .button.b3 { border-right: 2px solid #ac5e2c; }
  409.  
  410. .socialbuttons .button.b1 .b1col { opacity: 0; transition: opacity 0.5s ease; }
  411. .socialbuttons .button.b2 .b2col { opacity: 0; transition: opacity 0.5s ease; }
  412. .socialbuttons .button.b3 .b3col { opacity: 0; transition: opacity 0.5s ease; }
  413. .socialbuttons .button.b4 .b4col { opacity: 0; transition: opacity 0.5s ease; }
  414.  
  415. .socialbuttons .button.b1:hover .b1col { opacity: 1; }
  416. .socialbuttons .button.b2:hover .b2col { opacity: 1; }
  417. .socialbuttons .button.b3:hover .b3col { opacity: 1; }
  418. .socialbuttons .button.b4:hover .b4col { opacity: 1; }
  419.  
  420.  
  421.  
  422.  
  423. .submenu {
  424. position: absolute;
  425. display: inline-block;
  426. height: 220px;
  427. width: 100%;
  428. top: -100px;
  429. left: 999vw;
  430. background-color: #e8e8e8;
  431. transition: top 1s ease, left 100ms 1s ease;
  432. z-index: 10;
  433. }
  434. .submenu.visible {
  435. left: 0;
  436. top: 140px;
  437. transition: top 1s ease;
  438. }
  439. /* IT solutions */
  440. .submenu-two {
  441. height: 300px;
  442. top: -300px;
  443. }
  444.  
  445. /* about us */
  446. .submenu-four {
  447. height: 260px;
  448. top: -260px;
  449. }
  450.  
  451. /* contact us */
  452. .submenu-five {
  453. height: 500px;
  454. top: -400px;
  455. }
  456. .submenu-five .contactus {
  457. position: relative;
  458. display: inline-block;
  459. width: 70%;
  460. height: 100%;
  461. margin: 0 10% 0 20%;
  462. float: left;
  463. }
  464. .submenu-five .contactus .column {
  465. margin-top: 40px;
  466. height: 64%;
  467. }
  468. .submenu-five .contactus .title {
  469. position: relative;
  470. display: inline-block;
  471. float: left;
  472. width: 100%;
  473. }
  474. .submenu-five .contactus .title h1 {
  475. color: #8ec640;
  476. font-size: 32px;
  477. font-weight: bold;
  478. font-family: sans-serif;
  479. }
  480. .submenu-five .contactus .address {
  481. position: relative;
  482. display: inline-block;
  483. width: 25%;
  484. margin-top: 40px;
  485. float: left;
  486. }
  487. .submenu-five .contactus .address h1 {
  488. color: #545454; /* dark grey */
  489. padding: 4px 0;
  490. font-size: 12px;
  491. font-weight: 100;
  492. font-family: sans-serif;
  493. }
  494. .submenu-five .contactus .address a {
  495. color: #8ec640; /* dark grey */
  496. padding: 4px 0;
  497. font-size: 10px;
  498. font-weight: 100;
  499. text-decoration: none;
  500. font-family: sans-serif;
  501. }
  502. .submenu-five .contactus .form {
  503. position: relative;
  504. display: inline-block;
  505. width: 50%;
  506. margin-top: 40px;
  507. float: left;
  508. }
  509. .submenu-five .contactus .form h1 {
  510. color: #545454; /* dark grey */
  511. padding: 4px 20px;
  512. font-size: 12px;
  513. font-weight: 100;
  514. font-family: sans-serif;
  515. }
  516. .submenu-five .contactus .form h1:nth-child(2) { margin: 10px 0; }
  517. .submenu-five .contactus .form form {
  518. position: relative;
  519. display: inline-block;
  520. float: left;
  521. padding: 0 20px;
  522. }
  523. .submenu-five .contactus .form input {
  524. color: #8ec640;
  525. font-size: 12px;
  526. border: none;
  527. padding: 9px 5px;
  528. margin: 3px 0;
  529. float: left;
  530. background-color: #ffffff;
  531. border-radius: 2px;
  532. font-family: arial;
  533. }
  534. .submenu-five .contactus .form input:focus,
  535. .submenu-five .contactus .form input:valid {
  536. box-shadow: none;
  537. outline: none;
  538. background-position: 0 0;
  539. }
  540. .submenu-five .contactus .form input:nth-child(1) { width: 30%; }
  541. .submenu-five .contactus .form input:nth-child(2) { width: 58%; float: right;}
  542. .submenu-five .contactus .form input:nth-child(3) { width: 30%; }
  543. .submenu-five .contactus .form input:nth-child(4) { width: 58%; float: right; }
  544. .submenu-five .contactus .form input:nth-child(6) { font-size: 14px; padding: 5px 20px; font-family: 'Raleway'; background-color: #8ec640; color: #ffffff; }
  545. .submenu-five .contactus .form textarea {
  546. float: left;
  547. font-family: arial;
  548. font-size: 12px;
  549. color: #8ec640;
  550. background-color: #ffffff;
  551. border: none;
  552. padding: 9px 5px;
  553. margin: 3px 0;
  554. width: 98.5%;
  555. height: 100px;
  556. border-radius: 2px;
  557. resize: none;
  558. -webkit-box-shadow: none;
  559. box-shadow: none;
  560. outline: none;
  561. border-top: transparent !important;
  562. border-left: transparent !important;
  563. border-right: transparent !important;
  564. border-bottom: transparent !important;
  565. }
  566. .submenu-five .contactus .map {
  567. position: relative;
  568. display: inline-block;
  569. margin-top: 40px;
  570. margin-left: 20px;
  571. float: left;
  572. }
  573. .submenu .shopbutton {
  574. position: absolute;
  575. display: inline-block;
  576. height: 32px;
  577. background-color: #8ec640;
  578. float: left;
  579. bottom: 0px;
  580. left: 0px;
  581. cursor: default;
  582. }
  583. .submenu .shopbutton .basket {
  584. width: 20px;
  585. height: 20px;
  586. margin: 5px 5px;
  587. float: left;
  588. }
  589. .submenu .shopbutton .arrow {
  590. width: 15px;
  591. height: 15px;
  592. margin: 7.5px 15px 7.5px 5px;
  593. float: left;
  594. transition: margin 0.2s cubic-bezier(0.49, 0.21, 0.4, 0.91);
  595. }
  596. .submenu .shopbutton:hover .arrow {
  597. margin: 7.5px 5px 7.5px 15px;
  598. }
  599. .submenu .description .shopbutton h1 {
  600. line-height: normal;
  601. font-size: 10px;
  602. font-weight: bold;
  603. font-family: sans-serif;
  604. color: #ffffff;
  605. float: left;
  606. width: auto;
  607. margin: 10px 10px 5px 0;
  608. }
  609.  
  610.  
  611.  
  612.  
  613. #RyansMap {
  614. height:300px;
  615. width:250px;
  616. margin: 0;
  617. }
  618. .gm-style-iw * {
  619. display: block;
  620. width: 100%;
  621. }
  622. .gm-style-iw h4, .gm-style-iw p {
  623. margin: 0;
  624. padding: 0;
  625. }
  626. .gm-style-iw a {
  627. color: #4272db;
  628. }
  629. .submenu .sidenav, .submenu .menuoptioncontainer {
  630. position: relative;
  631. display: inline-block;
  632. height: 80%;
  633. width: 20%;
  634. margin-top: 30px;
  635. float: left;
  636. }
  637. .submenu .menuoptioncontainer { width: 40%; }
  638.  
  639. .submenu .sidenav a {
  640. position: relative;
  641. display: inline-block;
  642. text-decoration: none;
  643. text-align: left;
  644. float: right;
  645. width: 70%;
  646. padding: 10px 0;
  647. }
  648. .submenu .sidenav h1 {
  649. font-size: 14px;
  650. font-family: sans-serif;
  651. font-weight: 200;
  652. color: #8ec640;
  653. transition: color 0.1s ease;
  654. }
  655. .submenu .sidenav a:hover h1, .sidenav .selected h1{
  656. color: #555555;
  657. }
  658. .menuoption {
  659. position: absolute;
  660. display: inline-block;
  661. width: 100%;
  662. height: 100%;
  663. left: 0;
  664. float: left;
  665. transition: opacity 1s ease;
  666. }
  667. .menuoption.invisible {
  668. opacity: 0;
  669. left: 9999vw;
  670. }
  671. .header .column {
  672. position: relative;
  673. display: inline-block;
  674. float: left;
  675. height: 100%;
  676. background-color: rgba(0,0,0,0.2);
  677. width: 1px;
  678. }
  679. .menuoption .description {
  680. position: relative;
  681. display: inline-block;
  682. height: 100%;
  683. width: 40%;
  684. margin: 0 4%;
  685. float: left;
  686. background-color: #e8e8e8;
  687. }
  688. .menuoption .description h1 {
  689. line-height: 22px;
  690. font-size: 14px;
  691. font-family: sans-serif;
  692. font-weight: 100;
  693. color: rgba(0,0,0,0.6);
  694. }
  695. .menuoption .imagecontainer {
  696. position: relative;
  697. display: inline-block;
  698. height: 100%;
  699. width: 50%;
  700. float: left;
  701. }
  702. .menuoption .imagecontainer img {
  703. height: 100%;
  704. margin: 0 10%;
  705. }
  706.  
  707.  
  708.  
  709.  
  710.  
  711.  
  712.  
  713.  
  714. .footer {
  715. position: relative;
  716. display: inline-block;
  717. background-color: #f47d31;
  718. color: #ffffff;
  719. width: 100%;
  720. height: 300px;
  721. float: left;
  722. z-index: 200;
  723. }
  724. .footer .container {
  725. position: relative;
  726. display: inline-block;
  727. width: 28%;
  728. height: 250px;
  729. float: left;
  730. }
  731. .footer .container.footerlinks {
  732. width: 72%;
  733. }
  734. .footer .container.subcont {
  735. width: 188px;
  736. margin-right: 12%;
  737. margin-top: 50px;
  738. }
  739. .footer .imagecontainer {
  740. position: absolute;
  741. display: inline-block;
  742. height: 70px;
  743. top: 50px;
  744. left: 20%;
  745. bottom: 0;
  746. right: 0;
  747. }
  748. .footer .imagecontainer img {
  749. height: 100%;
  750. }
  751. .footer .container.subcont h1 {
  752. font-size: 17px;
  753. font-weight: 600;
  754. font-family: sans-serif;
  755. color: #ffffff;
  756. padding-bottom: 10px;
  757. border-bottom: 1px solid #ffffff;
  758. margin-bottom: 10px;
  759. }
  760. .footer .container.subcont a {
  761. position: relative;
  762. display: inline-block;
  763. font-size: 13px;
  764. width: 100%;
  765. font-weight: 100;
  766. font-family: sans-serif;
  767. color: #ffffff;
  768. text-decoration: none;
  769. float: left;
  770. padding: 10px 0;
  771. }
  772. .footer .container.subcont a:after {
  773. content: ' ';
  774. display: block;
  775. position: absolute;
  776. width: 0%;
  777. height: 1px;
  778. bottom: 0px;
  779. left: 0;
  780. background-color: #ffffff;
  781. transition: width 0.3s ease;
  782. }
  783. .footer .container.subcont a:hover:after {
  784. width: 100%;
  785. transition: width 0.6s ease;
  786. }
  787. .footer .container.subcont h2 {
  788. /* address */
  789. font-size: 13px;
  790. width: 100%;
  791. font-weight: 100;
  792. font-family: sans-serif;
  793. color: #ffffff;
  794. text-decoration: none;
  795. float: left;
  796. margin: 10px 0;
  797. }
  798.  
  799. /* very bottom (small) footer */
  800. .footer-2 {
  801. position: relative;
  802. display: inline-block;
  803. background-color: #f47d31;
  804. color: #ffffff;
  805. width: 100%;
  806. height: 100px;
  807. padding: 20px 0 0 0;
  808. float: left;
  809. z-index: 200;
  810. }
  811. .footer-2 .socialcontainer {
  812. position: relative;
  813. display: inline-block;
  814. color: #ffffff;
  815. width: 28%;
  816. float: left;
  817. }
  818. .footer-2 .socialcontainer .smallcont {
  819. position: relative;
  820. display: inline-block;
  821. float: left;
  822. margin-left: 20%;
  823. }
  824. .navigation-three .socialbuttons,
  825. .footer-2 .socialbuttons {
  826. position: relative;
  827. display: inline-block;
  828. margin: 10px 0;
  829. }
  830. .navigation-three .button,
  831. .footer-2 .button {
  832. position: relative;
  833. display: inline-block;
  834. width: 30px;
  835. height: 30px;
  836. background-color: transparent;
  837. text-align: center;
  838. float: left;
  839. padding: 0 2%;
  840. }
  841. .navigation-three .button img,
  842. .footer-2 .button img {
  843. width: 16px;
  844. height: 16px;
  845. float: left;
  846. position: absolute;
  847. left: 12px;
  848. top: 7px;
  849. }
  850.  
  851.  
  852. .footer-2 .socialcontainer h1 {
  853. position: relative;
  854. display: inline-block;
  855. color: #ffffff;
  856. font-family: sans-serif;
  857. font-weight: 100;
  858. font-size: 14px;
  859. width: 100%;
  860. }
  861. .footer-2 .button {
  862. position: relative;
  863. display: inline-block;
  864. width: 30px;
  865. height: 30px;
  866. background-color: transparent;
  867. text-align: center;
  868. float: left;
  869. padding: 0 2%;
  870. }
  871. .footer-2 .button img {
  872. position: absolute;
  873. display: inline-block;
  874. width: 16px;
  875. height: 16px;
  876. top: 50%;
  877. left: 50%;
  878. transform: translate(-50%,-50%);
  879. }
  880. .footer-2 .middlelinks {
  881. position: relative;
  882. display: inline-block;
  883. width: 40%;
  884. float: left;
  885. }
  886. .footer-2 .middlelinks a {
  887. position: relative;
  888. display: inline-block;
  889. color: #ffffff;
  890. font-family: sans-serif;
  891. font-weight: 100;
  892. font-size: 11px;
  893. margin: 40px 0 0 0;
  894. padding: 0 10px;
  895. float: left;
  896. text-decoration: none;
  897. }
  898. .footer-2 .middlelinks a:nth-child(1) { border-right: 1px solid #ffffff; padding: 0 10px 0 0; }
  899. .footer-2 .middlelinks a:nth-child(2) { border-right: 1px solid #ffffff; }
  900. .footer-2 .middlelinks a:nth-child(3) { border-right: 1px solid #ffffff; }
  901. .footer-2 .copyright {
  902. position: relative;
  903. display: inline-block;
  904. width: 24%;
  905. float: left;
  906. }
  907. .footer-2 .copyright h2 {
  908. position: relative;
  909. display: inline-block;
  910. color: #ffffff;
  911. font-family: sans-serif;
  912. font-weight: 100;
  913. font-size: 14px;
  914. padding: 40px 0 0 0;
  915. width: 100%;
  916. float: left;
  917. text-align: center;
  918. }
  919.  
  920. .header .nav-mobile-options {
  921. position: absolute;
  922. display: none;
  923. width: 100%;
  924. max-height: 90vh;
  925. top: 88px;
  926. left: 0;
  927. overflow: scroll;
  928. overflow-x: hidden;
  929. }
  930. .header .nav-mobile-options .option {
  931. position: relative;
  932. display: inline-block;
  933. width: 100%;
  934. padding: 3vh 0 3vh;
  935. cursor: pointer;
  936. border-bottom: 1px solid #d1d1d1;
  937. transition: padding 0.5s ease;
  938. }
  939. .header .nav-mobile-options .option.open {
  940. padding: 3vh 0 0;
  941. }
  942. .header .nav-mobile-options .option h1 {
  943. position: relative;
  944. display: inline-block;
  945. width: 100%;
  946. font-family: sans-serif;
  947. font-weight: 100;
  948. font-size: 16px;
  949. color: #575757;
  950. text-align: center;
  951. }
  952. .header .nav-mobile-options .option .sub-options {
  953. position: relative;
  954. display: inline-block;
  955. background-color: #7aac34;
  956. width: 100%;
  957. max-height: 0px;
  958. overflow: hidden;
  959. box-sizing: border-box;
  960. transition: max-height 0.5s ease,padding 0.5s ease, margin 0.5s ease;
  961. padding: 0;
  962. margin: 0;
  963. float: left;
  964. padding: 0;
  965. margin-top: 0;
  966. }
  967. .header .nav-mobile-options .option .sub-options.managed {
  968. background-color: #378dc5;
  969. }
  970.  
  971. .header .nav-mobile-options .option .sub-options.open {
  972. max-height: 340px;
  973. padding: 20px 0;
  974. margin-top: 10px;
  975. }
  976. .header .nav-mobile-options .option .sub-options h1 {
  977. padding: 10px 0;
  978. color: #ffffff;
  979. border-bottom: 1px solid #72a031;
  980. }
  981. .header .nav-mobile-options .option .sub-options a:nth-child(1) h1 {
  982. border-top: 1px solid #72a031;
  983. }
  984. .header .nav-mobile-options .option .sub-options.managed h1 {
  985. border-bottom: 1px solid #347eaf;
  986. }
  987. .header .nav-mobile-options .option .sub-options.managed a:nth-child(1) h1 {
  988. border-top: 1px solid #347eaf;
  989. }
  990. .header .nav-mobile-options .socialbuttons{
  991. position: relative;
  992. display: inline-block;
  993. width: 100%;
  994. margin: 10px 0;
  995. height: 100px;
  996. background-color: #f47d31;
  997. text-align: center;
  998. }
  999. .header .nav-mobile-options .socialbuttons .button{
  1000. position: relative;
  1001. display: inline-block;
  1002. width: 30px;
  1003. height: 30px;
  1004. background-color: transparent;
  1005. float: none;
  1006. }
  1007. .header .nav-mobile-options .socialbuttons .button img {
  1008. width: 16px;
  1009. height: 16px;
  1010. float: left;
  1011. position: absolute;
  1012. left: 12px;
  1013. top: 7px;
  1014. }
  1015. .header .nav-mobile-options .socialbuttons .button.b1 { border-right: none; }
  1016. .header .nav-mobile-options .socialbuttons .button.b2 { border-right: none }
  1017. .header .nav-mobile-options .socialbuttons .button.b3 { border-right: none; }
  1018.  
  1019. .header .nav-mobile-options .socialbuttons .button.b1 .b1col { opacity: 0; transition: opacity 0.5s ease; }
  1020. .header .nav-mobile-options .socialbuttons .button.b2 .b2col { opacity: 0; transition: opacity 0.5s ease; }
  1021. .header .nav-mobile-options .socialbuttons .button.b3 .b3col { opacity: 0; transition: opacity 0.5s ease; }
  1022. .header .nav-mobile-options .socialbuttons .button.b4 .b4col { opacity: 0; transition: opacity 0.5s ease; }
  1023.  
  1024. .header .nav-mobile-options .socialbuttons .button.b1:hover .b1col { opacity: 1; }
  1025. .header .nav-mobile-options .socialbuttons .button.b2:hover .b2col { opacity: 1; }
  1026. .header .nav-mobile-options .socialbuttons .button.b3:hover .b3col { opacity: 1; }
  1027. .header .nav-mobile-options .socialbuttons .button.b4:hover .b4col { opacity: 1; }
  1028.  
  1029.  
  1030. .header .nav-mobile-button {
  1031. position: absolute;
  1032. display: inline-block;
  1033. right: 30px;
  1034. top: 50%;
  1035. height: 28px;
  1036. width: 41px;
  1037. transform: translate(-50%, -50%);
  1038. background-color: transparent;
  1039. opacity: 0; /* hidden and disable if not on phones*/
  1040. display: none;
  1041. z-index: 1;
  1042. }
  1043. .header .nav-mobile-button .line {
  1044. position: absolute;
  1045. display: inline-block;
  1046. height: 4px;
  1047. left: 0;
  1048. width: 100%;
  1049. background-color: #6e6e6e;
  1050. margin: 0;
  1051. float: none;
  1052. }
  1053. .header .nav-mobile-button .line.l1 { top: 0px; }
  1054. .header .nav-mobile-button .line.l2 { top: 12px; }
  1055. .header .nav-mobile-button .line.l3 { top: 24px; }
  1056.  
  1057.  
  1058.  
  1059. /* MEDIA QUERIES */
  1060.  
  1061.  
  1062.  
  1063. /* ----------------------------------------------------*/
  1064. /* Code That Doesnt Change Between Mobile Resolution */
  1065. /* ----------------------------------------------------*/
  1066. @media only screen and (min-width : 0px) and (max-width : 992px) {
  1067. .header .submenu { display: none; }
  1068. .header .navigation { display: none; }
  1069. .header .navigation-three { display: none; }
  1070. .header.navigation-toggled:after {
  1071. content: ' ';
  1072. position: absolute;
  1073. display: block;
  1074. top: 0;
  1075. left: 0;
  1076. width: 100vw;
  1077. background-color: #f2f2f2;
  1078. height: 100%;
  1079. }
  1080. .header.navigation-toggled:before {
  1081. content: ' ';
  1082. position: absolute;
  1083. display: block;
  1084. top: 0;
  1085. left: 0;
  1086. width: 100vw;
  1087. background-color: rgb(229, 229, 229);
  1088. height: 100vh;
  1089. }
  1090. .header.navigation-toggled .nav-mobile-options { display: inline-block; }
  1091. .header .nav-mobile-button { opacity: 1; display: inline-block; }
  1092. .header .nav-mobile-button .line.l1 { transition: transform 0.5s ease, opacity 0.5s ease; }
  1093. .header .nav-mobile-button .line.l2 { transition: transform 0.5s ease, opacity 0.5s ease;3 }
  1094. .header .nav-mobile-button .line.l3 { transition: transform 0.5s ease, opacity 0.5s ease; }
  1095. .header .nav-mobile-button.toggled .line.l1{ transition: transform 0.5s ease; transform: translateY(12px) rotate(45deg); }
  1096. .header .nav-mobile-button.toggled .line.l2{ transition: transform 0.5s ease; opacity: 0; }
  1097. .header .nav-mobile-button.toggled .line.l3{ transition: transform 0.5s ease; transform: translateY(-12px) rotate(-45deg); }
  1098. .side-navigation { display: none; }
  1099. .header { height: 88px !important; }
  1100. .header .logocontainer img {
  1101. position: absolute;
  1102. top: 50%;
  1103. transform: translateY(-50%);
  1104. left: 20px;
  1105. margin: 0;
  1106. }
  1107. .bodycontainer {
  1108. margin-left: 0 !important;
  1109. margin-top: 88px !important;
  1110. width: 100% !important;
  1111. }
  1112. .footer { z-index: 10; }
  1113. .footer-2 { z-index: 10; }
  1114. }
  1115.  
  1116.  
  1117. /* ----------------------------------------------------*/
  1118. /* Custom, iPhone Retina */
  1119. /* ----------------------------------------------------*/
  1120. @media only screen and (max-width : 320px) {
  1121. body::before {
  1122. content: "max-width : 320px fired";
  1123. display: block; text-align: center;
  1124. background: rgba(255, 255, 0, 0.48); width: 100%;
  1125. position: fixed;
  1126. top: 0; left: 0;
  1127. z-index: 9999;
  1128. }
  1129.  
  1130. .container .footer { display: none; }
  1131.  
  1132. .container .footer { display: none; }
  1133. .container .footer-2 .middlelinks { display: none; }
  1134. .container .footer-2 .socialcontainer { text-align: center; width: 100%; }
  1135. .container .footer-2 .socialcontainer .smallcont { margin-left: 0; width: 100%; }
  1136. .container .footer-2 .socialcontainer .smallcont .socialbuttons { margin-left: 0; width: 100%; text-align: center; }
  1137. .container .footer-2 .socialcontainer .smallcont .socialbuttons .button { float: none; border: 0; margin: 0 0; padding: 0; }
  1138. .container .footer-2 .copyright { width: 100%; }
  1139. .container .footer-2 .copyright h2 { padding: 0; }
  1140.  
  1141. }
  1142.  
  1143.  
  1144. /* ----------------------------------------------------*/
  1145. /* Extra Small Devices, Phones */
  1146. /* ----------------------------------------------------*/
  1147. @media only screen and (min-width : 320px) and (max-width : 480px) {
  1148. body::before {
  1149. content: "max-width : 480px fired";
  1150. display: block; text-align: center;
  1151. background: rgba(255, 255, 0, 0.48); width: 100%;
  1152. position: fixed;
  1153. top: 0; left: 0;
  1154. z-index: 9999;
  1155. }
  1156.  
  1157.  
  1158. .container .footer { display: none; }
  1159. .container .footer-2 .middlelinks { display: none; }
  1160. .container .footer-2 .socialcontainer { text-align: center; width: 100%; }
  1161. .container .footer-2 .socialcontainer .smallcont { margin-left: 0; width: 100%; }
  1162. .container .footer-2 .socialcontainer .smallcont .socialbuttons { margin-left: 0; width: 100%; text-align: center; }
  1163. .container .footer-2 .socialcontainer .smallcont .socialbuttons .button { float: none; border: 0; margin: 0 0; padding: 0; }
  1164. .container .footer-2 .copyright { width: 100%; }
  1165. .container .footer-2 .copyright h2 { padding: 0; }
  1166. }
  1167.  
  1168.  
  1169. /* ----------------------------------------------------*/
  1170. /* Small Devices, Tablets */
  1171. /* ----------------------------------------------------*/
  1172. @media only screen and (min-width : 480px) and (max-width : 768px) {
  1173. body::before {
  1174. content: "max-width : 768px fired";
  1175. display: block; text-align: center;
  1176. background: rgba(255, 255, 0, 0.48); width: 100%;
  1177. position: fixed;
  1178. top: 0; left: 0;
  1179. z-index: 9999;
  1180. }
  1181.  
  1182. .container .footer { display: none; }
  1183. .container .footer-2 .middlelinks { display: none; }
  1184. .container .footer-2 .socialcontainer { width: 50%; }
  1185. .container .footer-2 .copyright { width: 50%; }
  1186. }
  1187.  
  1188.  
  1189. /* ----------------------------------------------------*/
  1190. /* Medium Devices, Desktops */
  1191. /* ----------------------------------------------------*/
  1192. @media only screen and (min-width : 768px) and (max-width : 992px) {
  1193. body::before {
  1194. content: "max-width : 992px fired";
  1195. display: block; text-align: center;
  1196. background: rgba(255, 255, 0, 0.48); width: 100%;
  1197. position: fixed;
  1198. top: 0; left: 0;
  1199. z-index: 9999;
  1200. }
  1201.  
  1202. .container .footer .container.logo { display: none; }
  1203. .container .footer .container.footerlinks { width: 72%; text-align: left; }
  1204. .container .footer .container.footerlinks .subcont { margin-right: 4%; margin-top: 50px; width: 160px; }
  1205.  
  1206. .container .footer-2 .socialcontainer { width: 25%; }
  1207. .container .footer-2 .middlelinks { width: 59%; text-align: center; }
  1208. .container .footer-2 .middlelinks a { float: none; }
  1209. .container .footer-2 .copyright { width: 15%; }
  1210. }
  1211.  
  1212.  
  1213. /* ----------------------------------------------------*/
  1214. /* Large Devices, Wide Screens */
  1215. /* ----------------------------------------------------*/
  1216. @media only screen and (min-width : 992px) and (max-width : 1200px) {
  1217. body::before {
  1218. content: "max-width : 1200px fired";
  1219. display: block; text-align: center;
  1220. background: rgba(255, 255, 0, 0.48); width: 100%;
  1221. position: fixed;
  1222. top: 0; left: 0;
  1223. z-index: 9999;
  1224. }
  1225.  
  1226. .header .navigation { width: 68%; }
  1227. .header .navigation-three { width: 17%; }
  1228. .container .footer .container.subcont { margin-right: 5%; }
  1229. .container .footer-2 .copyright { float: right; }
  1230. .container .footer-2 .middlelinks { width: 47%; }
  1231. }
  1232.  
  1233. /* ----------------------------------------------------*/
  1234. /* SPECIAL */
  1235. /* ----------------------------------------------------*/
  1236. @media only screen and (min-width : 1200px) and (max-width : 1300px) {
  1237. .footer .container.subcont { margin-right: 5%; }
  1238. }
  1239.  
  1240.  
  1241.  
  1242.  
  1243.  
  1244. /* ----------------------------------------------------*/
  1245. /* SPECIAL - Margin to Align the two navigation */
  1246. /* ----------------------------------------------------*/
  1247. @media only screen and (min-width : 900px) and (max-width : 1000px) { .submenu .sidenav { margin-left: 17.8%; } }
  1248. @media only screen and (min-width : 1000px) and (max-width : 1100px) { .submenu .sidenav { margin-left: 18%; } }
  1249. @media only screen and (min-width : 1100px) and (max-width : 1200px) { .submenu .sidenav { margin-left: 19%; } }
  1250. @media only screen and (min-width : 1200px) and (max-width : 1240px) { .submenu .sidenav { margin-left: 21%; } }
  1251. @media only screen and (min-width : 1240px) and (max-width : 1340px) { .submenu .sidenav { margin-left: 21.5%; } }
  1252. @media only screen and (min-width : 1340px) and (max-width : 1540px) { .submenu .sidenav { margin-left: 22.5%; } }
  1253. @media only screen and (min-width : 1540px) and (max-width : 1640px) { .submenu .sidenav { margin-left: 23%; } }
  1254. @media only screen and (min-width : 1640px) and (max-width : 1770px) { .submenu .sidenav { margin-left: 23.4%; } }
  1255. @media only screen and (min-width : 1770px) and (max-width : 1920px) { .submenu .sidenav { margin-left: 24%; } }
  1256. @media only screen and (min-width : 1920px) { .submenu .sidenav { margin-left: 24.5%; } }
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!