API tools faq
paste
RyanEarnshaw

Untitled

RyanEarnshaw
Apr 7th, 2017
75
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 34.45 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: 240px;
  420. width: 100%;
  421. top: -240px;
  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: 320px;
  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. position: relative;
  677. display: inline-block;
  678. font-size: 14px;
  679. font-family: sans-serif;
  680. font-weight: 200;
  681. color: #8ec640;
  682. transition: color 0.2s ease;
  683. }
  684. .submenu .sidenav h1:hover,
  685. .submenu .sidenav h1.selected{
  686. color: #555555;
  687. }
  688. .menuoption {
  689. position: absolute;
  690. display: inline-block;
  691. width: 100%;
  692. height: 100%;
  693. left: 0;
  694. float: left;
  695. transition: opacity 1s ease;
  696. }
  697. .menuoption.invisible {
  698. opacity: 0;
  699. left: 9999vw;
  700. }
  701. .header .column {
  702. position: relative;
  703. display: inline-block;
  704. float: left;
  705. height: 100%;
  706. background-color: rgba(0,0,0,0.2);
  707. width: 1px;
  708. }
  709. .menuoption .description {
  710. position: relative;
  711. display: inline-block;
  712. height: 100%;
  713. width: 40%;
  714. margin: 0 4%;
  715. float: left;
  716. background-color: #e8e8e8;
  717. }
  718. .menuoption .description h1 {
  719. line-height: 22px;
  720. font-size: 14px;
  721. font-family: sans-serif;
  722. font-weight: 100;
  723. color: rgba(0,0,0,0.6);
  724. }
  725. .menuoption .imagecontainer {
  726. position: relative;
  727. display: inline-block;
  728. height: 100%;
  729. width: 50%;
  730. float: left;
  731. }
  732. .menuoption .imagecontainer img {
  733. height: 100%;
  734. margin: 0 10%;
  735. }
  736.  
  737.  
  738.  
  739.  
  740.  
  741.  
  742.  
  743.  
  744. .footer {
  745. position: relative;
  746. display: inline-block;
  747. background-color: #f47d31;
  748. color: #ffffff;
  749. width: 100%;
  750. height: 300px;
  751. float: left;
  752. z-index: 200;
  753. }
  754. .footer .container {
  755. position: relative;
  756. display: inline-block;
  757. width: 28%;
  758. height: 250px;
  759. float: left;
  760. }
  761. .footer .container.footerlinks {
  762. width: 72%;
  763. }
  764. .footer .container.subcont {
  765. width: 188px;
  766. margin-right: 12%;
  767. margin-top: 50px;
  768. }
  769. .footer .imagecontainer {
  770. position: absolute;
  771. display: inline-block;
  772. height: 70px;
  773. top: 50px;
  774. left: 20%;
  775. bottom: 0;
  776. right: 0;
  777. }
  778. .footer .imagecontainer img {
  779. height: 100%;
  780. }
  781. .footer .container.subcont h1 {
  782. font-size: 17px;
  783. font-weight: 600;
  784. font-family: sans-serif;
  785. color: #ffffff;
  786. padding-bottom: 10px;
  787. border-bottom: 1px solid #ffffff;
  788. margin-bottom: 10px;
  789. }
  790. .footer .container.subcont a {
  791. position: relative;
  792. display: inline-block;
  793. font-size: 13px;
  794. width: 100%;
  795. font-weight: 100;
  796. font-family: sans-serif;
  797. color: #ffffff;
  798. text-decoration: none;
  799. float: left;
  800. padding: 10px 0;
  801. }
  802. .footer .container.subcont a:after {
  803. content: ' ';
  804. display: block;
  805. position: absolute;
  806. width: 0%;
  807. height: 1px;
  808. bottom: 0px;
  809. left: 0;
  810. background-color: #ffffff;
  811. transition: width 0.3s ease;
  812. }
  813. .footer .container.subcont a:hover:after {
  814. width: 100%;
  815. transition: width 0.6s ease;
  816. }
  817. .footer .container.subcont h2 {
  818. /* address */
  819. font-size: 13px;
  820. width: 100%;
  821. font-weight: 100;
  822. font-family: sans-serif;
  823. color: #ffffff;
  824. text-decoration: none;
  825. float: left;
  826. margin: 10px 0;
  827. }
  828.  
  829. /* very bottom (small) footer */
  830. .footer-2 {
  831. position: relative;
  832. display: inline-block;
  833. background-color: #f47d31;
  834. color: #ffffff;
  835. width: 100%;
  836. height: 100px;
  837. padding: 20px 0 0 0;
  838. float: left;
  839. z-index: 200;
  840. }
  841. .footer-2 .socialcontainer {
  842. position: relative;
  843. display: inline-block;
  844. color: #ffffff;
  845. width: 28%;
  846. float: left;
  847. }
  848. .footer-2 .socialbuttons {
  849. position: relative;
  850. display: inline-block;
  851. margin: 30px 0 0 17%;
  852. height: 30px;
  853. }
  854. .footer-2 .button {
  855. position: relative;
  856. display: inline-block;
  857. width: 48px;
  858. height: 30px;
  859. background-color: transparent;
  860. text-align: center;
  861. float: left;
  862. padding: 0;
  863. box-sizing: border-box;
  864. }
  865. .footer-2 .button img {
  866. position: absolute;
  867. display: inline-block;
  868. width: 16px;
  869. height: 16px;
  870. top: 50%;
  871. left: 50%;
  872. transform: translate(-50%,-50%);
  873. }
  874.  
  875.  
  876.  
  877. .footer-2 .middlelinks {
  878. position: relative;
  879. display: inline-block;
  880. width: 40%;
  881. float: left;
  882. }
  883. .footer-2 .middlelinks a {
  884. position: relative;
  885. display: inline-block;
  886. color: #ffffff;
  887. font-family: sans-serif;
  888. font-weight: 100;
  889. font-size: 13px;
  890. margin: 40px 0 0 0;
  891. padding: 0 10px;
  892. float: left;
  893. text-decoration: none;
  894. }
  895. .footer-2 .middlelinks a:nth-child(1) { border-right: 1px solid #ffffff; padding: 0 10px 0 0; }
  896. .footer-2 .middlelinks a:nth-child(2) { border-right: 1px solid #ffffff; }
  897. .footer-2 .middlelinks a:nth-child(3) { border-right: 1px solid #ffffff; }
  898. .footer-2 .copyright {
  899. position: relative;
  900. display: inline-block;
  901. width: 24%;
  902. float: left;
  903. }
  904. .footer-2 .copyright h2 {
  905. position: relative;
  906. display: inline-block;
  907. color: #ffffff;
  908. font-family: sans-serif;
  909. font-weight: 100;
  910. font-size: 14px;
  911. padding: 40px 0 0 0;
  912. width: 100%;
  913. float: left;
  914. text-align: center;
  915. }
  916.  
  917. .header .nav-mobile-options {
  918. position: absolute;
  919. display: none;
  920. width: 100%;
  921. max-height: 90vh;
  922. top: 88px;
  923. left: 0;
  924. overflow: scroll;
  925. overflow-x: hidden;
  926. }
  927. .header .nav-mobile-options .option {
  928. position: relative;
  929. display: inline-block;
  930. width: 100%;
  931. padding: 3vh 0 3vh;
  932. cursor: pointer;
  933. border-bottom: 1px solid #d1d1d1;
  934. transition: padding 0.5s ease;
  935. }
  936. .header .nav-mobile-options .option.open {
  937. padding: 3vh 0 0;
  938. }
  939. .header .nav-mobile-options .option h1 {
  940. position: relative;
  941. display: inline-block;
  942. width: 100%;
  943. font-family: sans-serif;
  944. font-weight: 100;
  945. font-size: 16px;
  946. color: #575757;
  947. text-align: center;
  948. }
  949. .header .nav-mobile-options .option .sub-options {
  950. position: relative;
  951. display: inline-block;
  952. background-color: #7aac34;
  953. width: 100%;
  954. max-height: 0px;
  955. overflow: hidden;
  956. box-sizing: border-box;
  957. transition: max-height 0.5s ease,padding 0.5s ease, margin 0.5s ease;
  958. padding: 0;
  959. margin: 0;
  960. float: left;
  961. padding: 0;
  962. margin-top: 0;
  963. }
  964. .header .nav-mobile-options .option .sub-options.managed {
  965. background-color: #378dc5;
  966. }
  967.  
  968. .header .nav-mobile-options .option .sub-options.open {
  969. max-height: 380px;
  970. padding: 20px 0;
  971. margin-top: 10px;
  972. }
  973. .header .nav-mobile-options .option .sub-options h1 {
  974. padding: 10px 0;
  975. color: #ffffff;
  976. border-bottom: 1px solid #72a031;
  977. }
  978. .header .nav-mobile-options .option .sub-options a:nth-child(1) h1 {
  979. border-top: 1px solid #72a031;
  980. }
  981. .header .nav-mobile-options .option .sub-options.managed h1 {
  982. border-bottom: 1px solid #347eaf;
  983. }
  984. .header .nav-mobile-options .option .sub-options.managed a:nth-child(1) h1 {
  985. border-top: 1px solid #347eaf;
  986. }
  987. .header .nav-mobile-options .socialbuttons{
  988. position: relative;
  989. display: inline-block;
  990. width: 100%;
  991. margin: 10px 0;
  992. padding: 20px 0;
  993. background-color: #f47d31;
  994. text-align: center;
  995. }
  996. .header .nav-mobile-options .socialbuttons .button{
  997. position: relative;
  998. display: inline-block;
  999. width: 30px;
  1000. height: 30px;
  1001. background-color: transparent;
  1002. float: none;
  1003. }
  1004. .header .nav-mobile-options .socialbuttons .button img {
  1005. width: 16px;
  1006. height: 16px;
  1007. float: left;
  1008. position: absolute;
  1009. left: 12px;
  1010. top: 7px;
  1011. }
  1012. .header .nav-mobile-options .socialbuttons .button.b1 { border-right: none; }
  1013. .header .nav-mobile-options .socialbuttons .button.b2 { border-right: none }
  1014. .header .nav-mobile-options .socialbuttons .button.b3 { border-right: none; }
  1015.  
  1016. .header .nav-mobile-options .socialbuttons .button.b1 .b1col { opacity: 0; transition: opacity 0.5s ease; }
  1017. .header .nav-mobile-options .socialbuttons .button.b2 .b2col { opacity: 0; transition: opacity 0.5s ease; }
  1018. .header .nav-mobile-options .socialbuttons .button.b3 .b3col { opacity: 0; transition: opacity 0.5s ease; }
  1019. .header .nav-mobile-options .socialbuttons .button.b4 .b4col { opacity: 0; transition: opacity 0.5s ease; }
  1020.  
  1021. .header .nav-mobile-options .socialbuttons .button.b1:hover .b1col { opacity: 1; }
  1022. .header .nav-mobile-options .socialbuttons .button.b2:hover .b2col { opacity: 1; }
  1023. .header .nav-mobile-options .socialbuttons .button.b3:hover .b3col { opacity: 1; }
  1024. .header .nav-mobile-options .socialbuttons .button.b4:hover .b4col { opacity: 1; }
  1025.  
  1026.  
  1027. .header .nav-mobile-button {
  1028. position: absolute;
  1029. display: inline-block;
  1030. right: 30px;
  1031. top: 50%;
  1032. height: 28px;
  1033. width: 41px;
  1034. transform: translate(-50%, -50%);
  1035. background-color: transparent;
  1036. opacity: 0; /* hidden and disable if not on phones*/
  1037. display: none;
  1038. z-index: 1;
  1039. }
  1040. .header .nav-mobile-button .line {
  1041. position: absolute;
  1042. display: inline-block;
  1043. height: 4px;
  1044. left: 0;
  1045. width: 100%;
  1046. background-color: #6e6e6e;
  1047. margin: 0;
  1048. float: none;
  1049. }
  1050. .header .nav-mobile-button .line.l1 { top: 0px; }
  1051. .header .nav-mobile-button .line.l2 { top: 12px; }
  1052. .header .nav-mobile-button .line.l3 { top: 24px; }
  1053. /* Mobile Navigation */
  1054. .nav-mobile-options .searchbar-container {
  1055. position: relative;
  1056. display: inline-block;
  1057. width: 100%;
  1058. height: 45px;
  1059. background-color: transparent;
  1060. box-sizing: border-box;
  1061. margin: 30px 1% 0;
  1062. text-align: center;
  1063. }
  1064. .nav-mobile-options .searchbar {
  1065. position: relative;
  1066. display: inline-block;
  1067. width: 90%;
  1068. height: 45px;
  1069. background-color: transparent;
  1070. border: 2px solid #8ec640;
  1071. box-sizing: border-box;
  1072. transition: width 0.5s ease;
  1073. }
  1074. .nav-mobile-options .searchbar img {
  1075. position: absolute;
  1076. width: 30px;
  1077. height: 30px;
  1078. top: 5px;
  1079. right: 5px;
  1080. }
  1081. .nav-mobile-options .searchbar input {
  1082. position: absolute;
  1083. top: 50%;
  1084. left: 10px;
  1085. width: 90%;
  1086. font-size: 12px;
  1087. font-family: sans-serif;
  1088. color: #8ec640;
  1089. transform: translateY(-50%);
  1090. border: 0;
  1091. background-color: transparent;
  1092. transition: width 0.5s ease;
  1093. }
  1094. .nav-mobile-options .searchbar input:focus,
  1095. .nav-mobile-options .searchbar input:valid {
  1096. box-shadow: none;
  1097. outline: none;
  1098. background-position: 0 0;
  1099. }
  1100.  
  1101.  
  1102. .email-modal {
  1103. position: fixed;
  1104. display: inline-block;
  1105. top: -100px;
  1106. left: 50%;
  1107. transform: translateX(-50%);
  1108. width: 100%;
  1109. max-width: 600px;
  1110. padding: 10px 0 12px;
  1111. box-sizing: border-box;
  1112. z-index: 9999;
  1113. border-radius: 5px;
  1114. animation: email_animation 5s 0.5s 1 normal forwards;
  1115. }
  1116. @keyframes email_animation {
  1117. 0% { top: -100px; }
  1118. 20% { top: 30px; }
  1119. 80% { top: 30px; }
  1120. 100% { top: -100px; }
  1121. }
  1122. .email-modal.email-successful { background-color: #8ec640; }
  1123. .email-modal.email-unsuccessful { background-color: #e04040; }
  1124. .email-modal h1 {
  1125. position: relative;
  1126. display: inline-block;
  1127. width: 100%;
  1128. color: #000000;
  1129. font-family: sans-serif;
  1130. font-weight: bolf;
  1131. font-size: 12px;
  1132. text-align: center;
  1133. }
  1134.  
  1135.  
  1136. /* MEDIA QUERIES */
  1137.  
  1138.  
  1139.  
  1140. /* ----------------------------------------------------*/
  1141. /* Code That Doesnt Change Between Mobile Resolution */
  1142. /* ----------------------------------------------------*/
  1143. @media only screen and (min-width : 0px) and (max-width : 992px) {
  1144. .header .submenu { display: none; }
  1145. .header .navigation { display: none; }
  1146. .header .navigation-three { display: none; }
  1147. .header.navigation-toggled:after {
  1148. content: ' ';
  1149. position: absolute;
  1150. display: block;
  1151. top: 0;
  1152. left: 0;
  1153. width: 100vw;
  1154. background-color: #f2f2f2;
  1155. height: 100%;
  1156. }
  1157. .header.navigation-toggled:before {
  1158. content: ' ';
  1159. position: absolute;
  1160. display: block;
  1161. top: 0;
  1162. left: 0;
  1163. width: 100vw;
  1164. background-color: rgb(229, 229, 229);
  1165. height: 100vh;
  1166. }
  1167. .header.navigation-toggled .nav-mobile-options { display: inline-block; }
  1168. .header .nav-mobile-button { opacity: 1; display: inline-block; }
  1169. .header .nav-mobile-button .line.l1 { transition: transform 0.5s ease, opacity 0.5s ease; }
  1170. .header .nav-mobile-button .line.l2 { transition: transform 0.5s ease, opacity 0.5s ease;3 }
  1171. .header .nav-mobile-button .line.l3 { transition: transform 0.5s ease, opacity 0.5s ease; }
  1172. .header .nav-mobile-button.toggled .line.l1{ transition: transform 0.5s ease; transform: translateY(12px) rotate(45deg); }
  1173. .header .nav-mobile-button.toggled .line.l2{ transition: transform 0.5s ease; opacity: 0; }
  1174. .header .nav-mobile-button.toggled .line.l3{ transition: transform 0.5s ease; transform: translateY(-12px) rotate(-45deg); }
  1175. .side-navigation { display: none; }
  1176. .header {
  1177. height: 88px !important;
  1178. -webkit-box-shadow: 0px 2px 21px 0px rgba(0,0,0,0.2);
  1179. -moz-box-shadow: 0px 2px 21px 0px rgba(0,0,0,0.2);
  1180. box-shadow: 0px 2px 21px 0px rgba(0, 0, 0, 0.2);
  1181. }
  1182. .header .logocontainer {
  1183. width: 50%;
  1184. }
  1185. .header .logocontainer img {
  1186. position: absolute;
  1187. top: 50%;
  1188. transform: translateY(-50%);
  1189. left: 20px;
  1190. margin: 0;
  1191. }
  1192. .bodycontainer {
  1193. margin-top: 80px !important;
  1194. margin-left: 0 !important;
  1195. width: 100% !important;
  1196. }
  1197.  
  1198. .footer { z-index: 10; }
  1199. .footer-2 { z-index: 10; }
  1200.  
  1201. }
  1202.  
  1203.  
  1204. /* ----------------------------------------------------*/
  1205. /* Custom, iPhone Retina */
  1206. /* ----------------------------------------------------*/
  1207. @media only screen and (max-width : 320px) {
  1208. body::before {
  1209. content: "max-width : 320px fired";
  1210. display: block; text-align: center;
  1211. background: rgba(255, 255, 0, 0.48); width: 100%;
  1212. position: fixed;
  1213. top: 0; left: 0;
  1214. z-index: 9999;
  1215. }
  1216.  
  1217. .container .footer {
  1218. height: auto;
  1219. }
  1220. .footer .container {
  1221. width: 100%;
  1222. height: 100px;
  1223. }
  1224. .footer .imagecontainer {
  1225. top: 50%;
  1226. left: 0;
  1227. bottom: 0;
  1228. right: 0;
  1229. width: 100%;
  1230. transform: translateY(-50%);
  1231. text-align: center;
  1232. }
  1233. .footer .container.footerlinks {
  1234. width: 100%;
  1235. height: auto;
  1236. }
  1237. .footer .container.subcont {
  1238. width: 100%;
  1239. padding: 10px 30px;
  1240. box-sizing: border-box;
  1241. height: auto;
  1242. }
  1243.  
  1244. .container .footer { display: none; }
  1245. .container .footer-2 .middlelinks { display: none; }
  1246. .container .footer-2 .socialcontainer { margin: 0; text-align: center; width: 100%; }
  1247. .container .footer-2 .socialcontainer .socialbuttons { margin: 0; width: 100%; text-align: center; }
  1248. .container .footer-2 .socialcontainer .socialbuttons .button { float: none; border: 0; margin: 0 0; padding: 0; }
  1249. .container .footer-2 .copyright { width: 100%; }
  1250. .container .footer-2 .copyright h2 { padding: 0; }
  1251.  
  1252. }
  1253.  
  1254.  
  1255. /* ----------------------------------------------------*/
  1256. /* Extra Small Devices, Phones */
  1257. /* ----------------------------------------------------*/
  1258. @media only screen and (min-width : 320px) and (max-width : 480px) {
  1259. body::before {
  1260. content: "max-width : 480px fired";
  1261. display: block; text-align: center;
  1262. background: rgba(255, 255, 0, 0.48); width: 100%;
  1263. position: fixed;
  1264. top: 0; left: 0;
  1265. z-index: 9999;
  1266. }
  1267.  
  1268.  
  1269. .container .footer {
  1270. height: auto;
  1271. }
  1272. .footer .container {
  1273. width: 100%;
  1274. height: 100px;
  1275. }
  1276. .footer .imagecontainer {
  1277. top: 50%;
  1278. left: 0;
  1279. bottom: 0;
  1280. right: 0;
  1281. width: 100%;
  1282. transform: translateY(-50%);
  1283. text-align: center;
  1284. }
  1285. .footer .container.footerlinks {
  1286. width: 100%;
  1287. height: auto;
  1288. }
  1289. .footer .container.subcont {
  1290. width: 100%;
  1291. padding: 10px 30px;
  1292. box-sizing: border-box;
  1293. height: auto;
  1294. }
  1295. .container .footer-2 .middlelinks { display: none; }
  1296. .container .footer-2 .socialcontainer { margin: 0; text-align: center; width: 100%; }
  1297. .container .footer-2 .socialcontainer .socialbuttons { margin: 0; width: 100%; text-align: center; }
  1298. .container .footer-2 .socialcontainer .socialbuttons .button { float: none; border: 0; margin: 0 0; padding: 0; }
  1299. .container .footer-2 .copyright { width: 100%; }
  1300. .container .footer-2 .copyright h2 { padding: 0; }
  1301. }
  1302.  
  1303.  
  1304. /* ----------------------------------------------------*/
  1305. /* Small Devices, Tablets */
  1306. /* ----------------------------------------------------*/
  1307. @media only screen and (min-width : 480px) and (max-width : 768px) {
  1308. body::before {
  1309. content: "max-width : 768px fired";
  1310. display: block; text-align: center;
  1311. background: rgba(255, 255, 0, 0.48); width: 100%;
  1312. position: fixed;
  1313. top: 0; left: 0;
  1314. z-index: 9999;
  1315. }
  1316.  
  1317. .container .footer {
  1318. height: auto;
  1319. }
  1320. .footer .container {
  1321. width: 100%;
  1322. height: 100px;
  1323. }
  1324. .footer .imagecontainer {
  1325. top: 50%;
  1326. left: 0;
  1327. bottom: 0;
  1328. right: 0;
  1329. width: 100%;
  1330. transform: translateY(-50%);
  1331. text-align: center;
  1332. }
  1333. .footer .container.footerlinks {
  1334. width: 100%;
  1335. height: auto;
  1336. }
  1337. .footer .container.subcont {
  1338. width: 100%;
  1339. padding: 10px 30px;
  1340. box-sizing: border-box;
  1341. height: auto;
  1342. }
  1343. .container .footer-2 .middlelinks { display: none; }
  1344. .container .footer-2 .socialcontainer { width: 50%; }
  1345. .container .footer-2 .copyright { width: 50%; }
  1346. }
  1347.  
  1348.  
  1349. /* ----------------------------------------------------*/
  1350. /* Medium Devices, Desktops */
  1351. /* ----------------------------------------------------*/
  1352. @media only screen and (min-width : 768px) and (max-width : 992px) {
  1353. body::before {
  1354. content: "max-width : 992px fired";
  1355. display: block; text-align: center;
  1356. background: rgba(255, 255, 0, 0.48); width: 100%;
  1357. position: fixed;
  1358. top: 0; left: 0;
  1359. z-index: 9999;
  1360. }
  1361.  
  1362. .container .footer .container.logo { display: none; }
  1363. .container .footer .container.footerlinks { width: 72%; text-align: left; }
  1364. .container .footer .container.footerlinks .subcont {margin-right: 3.8%;margin-top: 50px;width: 160px;}
  1365.  
  1366. .container .footer-2 .socialcontainer { width: 32%; }
  1367. .container .footer-2 .middlelinks { width: 52%; text-align: center; }
  1368. .container .footer-2 .middlelinks a { float: none; padding: 0 5px 0 0; }
  1369. .container .footer-2 .copyright { width: 15%; }
  1370. }
  1371.  
  1372.  
  1373. /* ----------------------------------------------------*/
  1374. /* Large Devices, Wide Screens */
  1375. /* ----------------------------------------------------*/
  1376. @media only screen and (min-width : 992px) and (max-width : 1200px) {
  1377. body::before {
  1378. content: "max-width : 1200px fired";
  1379. display: block; text-align: center;
  1380. background: rgba(255, 255, 0, 0.48); width: 100%;
  1381. position: fixed;
  1382. top: 0; left: 0;
  1383. z-index: 9999;
  1384. }
  1385.  
  1386. .header .navigation { width: 68%; }
  1387. .header .navigation-three { width: 17%; }
  1388. .container .footer .container.subcont { margin-right: 5%; }
  1389. .container .footer-2 .copyright { float: right; }
  1390. .container .footer-2 .middlelinks { width: 47%; }
  1391. }
  1392.  
  1393. /* ----------------------------------------------------*/
  1394. /* SPECIAL */
  1395. /* ----------------------------------------------------*/
  1396. @media only screen and (min-width : 1200px) and (max-width : 1300px) {
  1397. .footer .container.subcont { margin-right: 5%; }
  1398. }
  1399.  
  1400.  
  1401.  
  1402.  
  1403.  
  1404. /* ----------------------------------------------------*/
  1405. /* SPECIAL - Margin to Align the two navigation */
  1406. /* ----------------------------------------------------*/
  1407. @media only screen and (min-width : 900px) and (max-width : 1000px) { .submenu .sidenav { margin-left: 17.8%; } }
  1408. @media only screen and (min-width : 1000px) and (max-width : 1100px) { .submenu .sidenav { margin-left: 18%; } }
  1409. @media only screen and (min-width : 1100px) and (max-width : 1200px) { .submenu .sidenav { margin-left: 19%; } }
  1410. @media only screen and (min-width : 1200px) and (max-width : 1240px) { .submenu .sidenav { margin-left: 21%; } }
  1411. @media only screen and (min-width : 1240px) and (max-width : 1340px) { .submenu .sidenav { margin-left: 21.5%; } }
  1412. @media only screen and (min-width : 1340px) and (max-width : 1540px) { .submenu .sidenav { margin-left: 22.5%; } }
  1413. @media only screen and (min-width : 1540px) and (max-width : 1640px) { .submenu .sidenav { margin-left: 23%; } }
  1414. @media only screen and (min-width : 1640px) and (max-width : 1770px) { .submenu .sidenav { margin-left: 23.4%; } }
  1415. @media only screen and (min-width : 1770px) and (max-width : 1920px) { .submenu .sidenav { margin-left: 24%; } }
  1416. @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!