API tools faq
paste
RyanEarnshaw

Untitled

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