API tools faq
paste
RyanEarnshaw

Untitled

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