API tools faq
paste
RyanEarnshaw

Untitled

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