API tools faq
paste
Advertisement
RyanEarnshaw

Untitled

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