API tools faq
paste
RyanEarnshaw

Untitled

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