API tools faq
paste
RyanEarnshaw

Untitled

RyanEarnshaw
Mar 21st, 2017
134
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.89 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: 30px;
  782. height: 30px;
  783. background-color: transparent;
  784. text-align: center;
  785. float: left;
  786. padding: 0 2%;
  787. }
  788. .footer-2 .button img {
  789. position: absolute;
  790. display: inline-block;
  791. width: 16px;
  792. height: 16px;
  793. top: 50%;
  794. left: 50%;
  795. transform: translate(-50%,-50%);
  796. }
  797.  
  798.  
  799. .footer-2 .socialcontainer h1 {
  800. position: relative;
  801. display: inline-block;
  802. color: #ffffff;
  803. font-family: sans-serif;
  804. font-weight: 100;
  805. font-size: 14px;
  806. width: 100%;
  807. }
  808. .footer-2 .middlelinks {
  809. position: relative;
  810. display: inline-block;
  811. width: 40%;
  812. float: left;
  813. }
  814. .footer-2 .middlelinks a {
  815. position: relative;
  816. display: inline-block;
  817. color: #ffffff;
  818. font-family: sans-serif;
  819. font-weight: 100;
  820. font-size: 11px;
  821. margin: 40px 0 0 0;
  822. padding: 0 10px;
  823. float: left;
  824. text-decoration: none;
  825. }
  826. .footer-2 .middlelinks a:nth-child(1) { border-right: 1px solid #ffffff; padding: 0 10px 0 0; }
  827. .footer-2 .middlelinks a:nth-child(2) { border-right: 1px solid #ffffff; }
  828. .footer-2 .middlelinks a:nth-child(3) { border-right: 1px solid #ffffff; }
  829. .footer-2 .copyright {
  830. position: relative;
  831. display: inline-block;
  832. width: 24%;
  833. float: left;
  834. }
  835. .footer-2 .copyright h2 {
  836. position: relative;
  837. display: inline-block;
  838. color: #ffffff;
  839. font-family: sans-serif;
  840. font-weight: 100;
  841. font-size: 14px;
  842. padding: 40px 0 0 0;
  843. width: 100%;
  844. float: left;
  845. text-align: center;
  846. }
  847.  
  848. .header .nav-mobile-options {
  849. position: absolute;
  850. display: none;
  851. width: 100%;
  852. max-height: 90vh;
  853. top: 88px;
  854. left: 0;
  855. overflow: scroll;
  856. overflow-x: hidden;
  857. }
  858. .header .nav-mobile-options .option {
  859. position: relative;
  860. display: inline-block;
  861. width: 100%;
  862. padding: 3vh 0 3vh;
  863. cursor: pointer;
  864. border-bottom: 1px solid #d1d1d1;
  865. transition: padding 0.5s ease;
  866. }
  867. .header .nav-mobile-options .option.open {
  868. padding: 3vh 0 0;
  869. }
  870. .header .nav-mobile-options .option h1 {
  871. position: relative;
  872. display: inline-block;
  873. width: 100%;
  874. font-family: sans-serif;
  875. font-weight: 100;
  876. font-size: 16px;
  877. color: #575757;
  878. text-align: center;
  879. }
  880. .header .nav-mobile-options .option .sub-options {
  881. position: relative;
  882. display: inline-block;
  883. background-color: #7aac34;
  884. width: 100%;
  885. max-height: 0px;
  886. overflow: hidden;
  887. box-sizing: border-box;
  888. transition: max-height 0.5s ease,padding 0.5s ease, margin 0.5s ease;
  889. padding: 0;
  890. margin: 0;
  891. float: left;
  892. padding: 0;
  893. margin-top: 0;
  894. }
  895. .header .nav-mobile-options .option .sub-options.managed {
  896. background-color: #378dc5;
  897. }
  898.  
  899. .header .nav-mobile-options .option .sub-options.open {
  900. max-height: 340px;
  901. padding: 20px 0;
  902. margin-top: 10px;
  903. }
  904. .header .nav-mobile-options .option .sub-options h1 {
  905. padding: 10px 0;
  906. color: #ffffff;
  907. border-bottom: 1px solid #72a031;
  908. }
  909. .header .nav-mobile-options .option .sub-options a:nth-child(1) h1 {
  910. border-top: 1px solid #72a031;
  911. }
  912. .header .nav-mobile-options .option .sub-options.managed h1 {
  913. border-bottom: 1px solid #347eaf;
  914. }
  915. .header .nav-mobile-options .option .sub-options.managed a:nth-child(1) h1 {
  916. border-top: 1px solid #347eaf;
  917. }
  918. .header .nav-mobile-options .socialbuttons{
  919. position: relative;
  920. display: inline-block;
  921. width: 100%;
  922. margin: 10px 0;
  923. padding: 20px 0;
  924. background-color: #f47d31;
  925. text-align: center;
  926. }
  927. .header .nav-mobile-options .socialbuttons .button{
  928. position: relative;
  929. display: inline-block;
  930. width: 30px;
  931. height: 30px;
  932. background-color: transparent;
  933. float: none;
  934. }
  935. .header .nav-mobile-options .socialbuttons .button img {
  936. width: 16px;
  937. height: 16px;
  938. float: left;
  939. position: absolute;
  940. left: 12px;
  941. top: 7px;
  942. }
  943. .header .nav-mobile-options .socialbuttons .button.b1 { border-right: none; }
  944. .header .nav-mobile-options .socialbuttons .button.b2 { border-right: none }
  945. .header .nav-mobile-options .socialbuttons .button.b3 { border-right: none; }
  946.  
  947. .header .nav-mobile-options .socialbuttons .button.b1 .b1col { opacity: 0; transition: opacity 0.5s ease; }
  948. .header .nav-mobile-options .socialbuttons .button.b2 .b2col { opacity: 0; transition: opacity 0.5s ease; }
  949. .header .nav-mobile-options .socialbuttons .button.b3 .b3col { opacity: 0; transition: opacity 0.5s ease; }
  950. .header .nav-mobile-options .socialbuttons .button.b4 .b4col { opacity: 0; transition: opacity 0.5s ease; }
  951.  
  952. .header .nav-mobile-options .socialbuttons .button.b1:hover .b1col { opacity: 1; }
  953. .header .nav-mobile-options .socialbuttons .button.b2:hover .b2col { opacity: 1; }
  954. .header .nav-mobile-options .socialbuttons .button.b3:hover .b3col { opacity: 1; }
  955. .header .nav-mobile-options .socialbuttons .button.b4:hover .b4col { opacity: 1; }
  956.  
  957.  
  958. .header .nav-mobile-button {
  959. position: absolute;
  960. display: inline-block;
  961. right: 30px;
  962. top: 50%;
  963. height: 28px;
  964. width: 41px;
  965. transform: translate(-50%, -50%);
  966. background-color: transparent;
  967. opacity: 0; /* hidden and disable if not on phones*/
  968. display: none;
  969. z-index: 1;
  970. }
  971. .header .nav-mobile-button .line {
  972. position: absolute;
  973. display: inline-block;
  974. height: 4px;
  975. left: 0;
  976. width: 100%;
  977. background-color: #6e6e6e;
  978. margin: 0;
  979. float: none;
  980. }
  981. .header .nav-mobile-button .line.l1 { top: 0px; }
  982. .header .nav-mobile-button .line.l2 { top: 12px; }
  983. .header .nav-mobile-button .line.l3 { top: 24px; }
  984. /* Mobile Navigation */
  985. .nav-mobile-options .searchbar-container {
  986. position: relative;
  987. display: inline-block;
  988. width: 100%;
  989. height: 45px;
  990. background-color: transparent;
  991. box-sizing: border-box;
  992. margin: 30px 1% 0;
  993. text-align: center;
  994. }
  995. .nav-mobile-options .searchbar {
  996. position: relative;
  997. display: inline-block;
  998. width: 90%;
  999. height: 45px;
  1000. background-color: transparent;
  1001. border: 2px solid #8ec640;
  1002. box-sizing: border-box;
  1003. transition: width 0.5s ease;
  1004. }
  1005. .nav-mobile-options .searchbar img {
  1006. position: absolute;
  1007. width: 30px;
  1008. height: 30px;
  1009. top: 5px;
  1010. right: 5px;
  1011. }
  1012. .nav-mobile-options .searchbar input {
  1013. position: absolute;
  1014. top: 50%;
  1015. left: 10px;
  1016. width: 90%;
  1017. font-size: 12px;
  1018. font-family: sans-serif;
  1019. color: #8ec640;
  1020. transform: translateY(-50%);
  1021. border: 0;
  1022. background-color: transparent;
  1023. transition: width 0.5s ease;
  1024. }
  1025. .nav-mobile-options .searchbar input:focus,
  1026. .nav-mobile-options .searchbar input:valid {
  1027. box-shadow: none;
  1028. outline: none;
  1029. background-position: 0 0;
  1030. }
  1031.  
  1032.  
  1033.  
  1034. /* MEDIA QUERIES */
  1035.  
  1036.  
  1037.  
  1038. /* ----------------------------------------------------*/
  1039. /* Code That Doesnt Change Between Mobile Resolution */
  1040. /* ----------------------------------------------------*/
  1041. @media only screen and (min-width : 0px) and (max-width : 992px) {
  1042. .header .submenu { display: none; }
  1043. .header .navigation { display: none; }
  1044. .header .navigation-three { display: none; }
  1045. .header.navigation-toggled:after {
  1046. content: ' ';
  1047. position: absolute;
  1048. display: block;
  1049. top: 0;
  1050. left: 0;
  1051. width: 100vw;
  1052. background-color: #f2f2f2;
  1053. height: 100%;
  1054. }
  1055. .header.navigation-toggled:before {
  1056. content: ' ';
  1057. position: absolute;
  1058. display: block;
  1059. top: 0;
  1060. left: 0;
  1061. width: 100vw;
  1062. background-color: rgb(229, 229, 229);
  1063. height: 100vh;
  1064. }
  1065. .header.navigation-toggled .nav-mobile-options { display: inline-block; }
  1066. .header .nav-mobile-button { opacity: 1; display: inline-block; }
  1067. .header .nav-mobile-button .line.l1 { transition: transform 0.5s ease, opacity 0.5s ease; }
  1068. .header .nav-mobile-button .line.l2 { transition: transform 0.5s ease, opacity 0.5s ease;3 }
  1069. .header .nav-mobile-button .line.l3 { transition: transform 0.5s ease, opacity 0.5s ease; }
  1070. .header .nav-mobile-button.toggled .line.l1{ transition: transform 0.5s ease; transform: translateY(12px) rotate(45deg); }
  1071. .header .nav-mobile-button.toggled .line.l2{ transition: transform 0.5s ease; opacity: 0; }
  1072. .header .nav-mobile-button.toggled .line.l3{ transition: transform 0.5s ease; transform: translateY(-12px) rotate(-45deg); }
  1073. .side-navigation { display: none; }
  1074. .header { height: 88px !important; }
  1075. .header .logocontainer img {
  1076. position: absolute;
  1077. top: 50%;
  1078. transform: translateY(-50%);
  1079. left: 20px;
  1080. margin: 0;
  1081. }
  1082. .bodycontainer {
  1083. margin-left: 0 !important;
  1084. margin-top: 88px !important;
  1085. width: 100% !important;
  1086. }
  1087. .footer { z-index: 10; }
  1088. .footer-2 { z-index: 10; }
  1089. }
  1090.  
  1091.  
  1092. /* ----------------------------------------------------*/
  1093. /* Custom, iPhone Retina */
  1094. /* ----------------------------------------------------*/
  1095. @media only screen and (max-width : 320px) {
  1096. body::before {
  1097. content: "max-width : 320px fired";
  1098. display: block; text-align: center;
  1099. background: rgba(255, 255, 0, 0.48); width: 100%;
  1100. position: fixed;
  1101. top: 0; left: 0;
  1102. z-index: 9999;
  1103. }
  1104.  
  1105. .container .footer { display: none; }
  1106.  
  1107. .container .footer { display: none; }
  1108. .container .footer-2 .middlelinks { display: none; }
  1109. .container .footer-2 .socialcontainer { text-align: center; width: 100%; }
  1110. .container .footer-2 .socialcontainer .smallcont { margin-left: 0; width: 100%; }
  1111. .container .footer-2 .socialcontainer .smallcont .socialbuttons { margin-left: 0; width: 100%; text-align: center; }
  1112. .container .footer-2 .socialcontainer .smallcont .socialbuttons .button { float: none; border: 0; margin: 0 0; padding: 0; }
  1113. .container .footer-2 .copyright { width: 100%; }
  1114. .container .footer-2 .copyright h2 { padding: 0; }
  1115.  
  1116. }
  1117.  
  1118.  
  1119. /* ----------------------------------------------------*/
  1120. /* Extra Small Devices, Phones */
  1121. /* ----------------------------------------------------*/
  1122. @media only screen and (min-width : 320px) and (max-width : 480px) {
  1123. body::before {
  1124. content: "max-width : 480px fired";
  1125. display: block; text-align: center;
  1126. background: rgba(255, 255, 0, 0.48); width: 100%;
  1127. position: fixed;
  1128. top: 0; left: 0;
  1129. z-index: 9999;
  1130. }
  1131.  
  1132.  
  1133. .container .footer { display: none; }
  1134. .container .footer-2 .middlelinks { display: none; }
  1135. .container .footer-2 .socialcontainer { text-align: center; width: 100%; }
  1136. .container .footer-2 .socialcontainer .smallcont { margin-left: 0; width: 100%; }
  1137. .container .footer-2 .socialcontainer .smallcont .socialbuttons { margin-left: 0; width: 100%; text-align: center; }
  1138. .container .footer-2 .socialcontainer .smallcont .socialbuttons .button { float: none; border: 0; margin: 0 0; padding: 0; }
  1139. .container .footer-2 .copyright { width: 100%; }
  1140. .container .footer-2 .copyright h2 { padding: 0; }
  1141. }
  1142.  
  1143.  
  1144. /* ----------------------------------------------------*/
  1145. /* Small Devices, Tablets */
  1146. /* ----------------------------------------------------*/
  1147. @media only screen and (min-width : 480px) and (max-width : 768px) {
  1148. body::before {
  1149. content: "max-width : 768px 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. .container .footer { display: none; }
  1158. .container .footer-2 .middlelinks { display: none; }
  1159. .container .footer-2 .socialcontainer { width: 50%; }
  1160. .container .footer-2 .copyright { width: 50%; }
  1161. }
  1162.  
  1163.  
  1164. /* ----------------------------------------------------*/
  1165. /* Medium Devices, Desktops */
  1166. /* ----------------------------------------------------*/
  1167. @media only screen and (min-width : 768px) and (max-width : 992px) {
  1168. body::before {
  1169. content: "max-width : 992px fired";
  1170. display: block; text-align: center;
  1171. background: rgba(255, 255, 0, 0.48); width: 100%;
  1172. position: fixed;
  1173. top: 0; left: 0;
  1174. z-index: 9999;
  1175. }
  1176.  
  1177. .container .footer .container.logo { display: none; }
  1178. .container .footer .container.footerlinks { width: 72%; text-align: left; }
  1179. .container .footer .container.footerlinks .subcont { margin-right: 4%; margin-top: 50px; width: 160px; }
  1180.  
  1181. .container .footer-2 .socialcontainer { width: 25%; }
  1182. .container .footer-2 .middlelinks { width: 59%; text-align: center; }
  1183. .container .footer-2 .middlelinks a { float: none; }
  1184. .container .footer-2 .copyright { width: 15%; }
  1185. }
  1186.  
  1187.  
  1188. /* ----------------------------------------------------*/
  1189. /* Large Devices, Wide Screens */
  1190. /* ----------------------------------------------------*/
  1191. @media only screen and (min-width : 992px) and (max-width : 1200px) {
  1192. body::before {
  1193. content: "max-width : 1200px fired";
  1194. display: block; text-align: center;
  1195. background: rgba(255, 255, 0, 0.48); width: 100%;
  1196. position: fixed;
  1197. top: 0; left: 0;
  1198. z-index: 9999;
  1199. }
  1200.  
  1201. .header .navigation { width: 68%; }
  1202. .header .navigation-three { width: 17%; }
  1203. .container .footer .container.subcont { margin-right: 5%; }
  1204. .container .footer-2 .copyright { float: right; }
  1205. .container .footer-2 .middlelinks { width: 47%; }
  1206. }
  1207.  
  1208. /* ----------------------------------------------------*/
  1209. /* SPECIAL */
  1210. /* ----------------------------------------------------*/
  1211. @media only screen and (min-width : 1200px) and (max-width : 1300px) {
  1212. .footer .container.subcont { margin-right: 5%; }
  1213. }
  1214.  
  1215.  
  1216.  
  1217.  
  1218.  
  1219. /* ----------------------------------------------------*/
  1220. /* SPECIAL - Margin to Align the two navigation */
  1221. /* ----------------------------------------------------*/
  1222. @media only screen and (min-width : 900px) and (max-width : 1000px) { .submenu .sidenav { margin-left: 17.8%; } }
  1223. @media only screen and (min-width : 1000px) and (max-width : 1100px) { .submenu .sidenav { margin-left: 18%; } }
  1224. @media only screen and (min-width : 1100px) and (max-width : 1200px) { .submenu .sidenav { margin-left: 19%; } }
  1225. @media only screen and (min-width : 1200px) and (max-width : 1240px) { .submenu .sidenav { margin-left: 21%; } }
  1226. @media only screen and (min-width : 1240px) and (max-width : 1340px) { .submenu .sidenav { margin-left: 21.5%; } }
  1227. @media only screen and (min-width : 1340px) and (max-width : 1540px) { .submenu .sidenav { margin-left: 22.5%; } }
  1228. @media only screen and (min-width : 1540px) and (max-width : 1640px) { .submenu .sidenav { margin-left: 23%; } }
  1229. @media only screen and (min-width : 1640px) and (max-width : 1770px) { .submenu .sidenav { margin-left: 23.4%; } }
  1230. @media only screen and (min-width : 1770px) and (max-width : 1920px) { .submenu .sidenav { margin-left: 24%; } }
  1231. @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!