API tools faq
paste
RyanEarnshaw

Untitled

RyanEarnshaw
Mar 1st, 2017
92
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.19 KB | None | 0 0
raw download clone embed print report
  1. @import url('http://fonts.googleapis.com/css?family=Roboto');
  2. @import url('https://fonts.googleapis.com/css?family=Raleway');
  3.  
  4. /*
  5. animation-name: stretch;
  6. animation-duration: 1.5s;
  7. animation-timing-function: ease-out;
  8. animation-delay: 0;
  9. animation-direction: alternate;
  10. animation-iteration-count: infinite;
  11. animation-fill-mode: none;
  12. animation-play-state: running;
  13.  
  14. animation: name, duration, timing-function, delay, iteration-count, direction, fill-mode, play-state;
  15. animation: name duration delay interations direction fillmode;
  16. */
  17. * {
  18. margin:0;
  19. padding:0;
  20. }
  21.  
  22. html, body {
  23. font-family: 'Raleway', sans-serif;
  24. margin:0;
  25. padding:0;
  26. height:auto;
  27. background-color: rgba(232,232,232,1);
  28. }
  29.  
  30. .content {
  31. text-align: center;
  32. }
  33.  
  34. .header {
  35. position: fixed;
  36. display: inline-block;
  37. width: 100vw;
  38. height: 140px;
  39. top: 0;
  40. left: 0;
  41. background-color: #e8e8e8;
  42. border: none;
  43. margin: auto;
  44. float: left;
  45. z-index: 100;
  46. }
  47. .header .logocontainer,
  48. .header .navigation,
  49. .header .navigation-three {
  50. background-color: #e8e8e8;
  51. }
  52. .header .logocontainer img {
  53. width: 100px;
  54. margin: 45px auto;
  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: 750px;
  72. }
  73. .navigation a {
  74. position: relative;
  75. display: inline-block;
  76. text-decoration: none;
  77. color: #000000;
  78. height: 40px;
  79. margin-top: 75px;
  80. margin: 75px 20px 0 20px;
  81. text-align: left;
  82. float: left;
  83. }
  84. .navigation h1 {
  85. margin-top: 10px;
  86. font-size: 16px;
  87. font-weight: 100;
  88. font-family: sans-serif;
  89. color: #8ec640;
  90. }
  91. .navigation a:nth-child(5) h1 { color: rgba(108,108,108,1); }
  92. .navigation a:nth-child(6) h1 { color: rgba(108,108,108,1); }
  93. .navigation a:nth-child(7) h1 { color: rgba(108,108,108,1); }
  94.  
  95.  
  96.  
  97. .side-navigation {
  98. position: absolute;
  99. display: inline-block;
  100. width: 20vw;
  101. background-color: #BCBEC0;
  102. height: 100vh;
  103. z-index: 1;
  104. left: 0;
  105. bottom: -100vh;
  106. }
  107. .side-navigation .buttons {
  108. position: relative;
  109. display: inline-block;
  110. margin: 80px auto;
  111. float: left;
  112. }
  113. .side-navigation .buttons a {
  114. position: relative;
  115. display: inline-block;
  116. margin: 0 0 0 4vw;
  117. float: left;
  118. text-decoration: none;
  119. width: 200px;
  120. }
  121. .side-navigation .buttons a h1 {
  122. position: relative;
  123. display: inline-block;
  124. color: #ffffff;
  125. font-family: sans-serif;
  126. font-weight: 100;
  127. font-size: 14px;
  128. margin: 15px 0 15px 0;
  129. padding: 0 10px;
  130. float: left;
  131. text-decoration: none;
  132. }
  133. .side-navigation .buttons a.selected h1 {
  134. color: rgba(0,0,0,0.6);
  135. }
  136. .side-navigation .shopbuttoncontainer {
  137. position: relative;
  138. display: inline-block;
  139. background-color: rgba(0,0,0,0.3);
  140. width: 100%;
  141. }
  142. .side-navigation .shopbuttoncontainer .shopbutton {
  143. position: relative;
  144. display: inline-block;
  145. float: left;
  146. margin: 30px 0;
  147. width: 100%;
  148. }
  149. .side-navigation .shopbuttoncontainer .shopbutton img {
  150. position: relative;
  151. display: inline-block;
  152. float: left;
  153. margin-left: 4vw;
  154. width: 20px;
  155. }
  156. .side-navigation .shopbuttoncontainer .shopbutton h1 {
  157. position: relative;
  158. display: inline-block;
  159. float: left;
  160. margin-left: 10px;
  161. padding: 2px 0;
  162. font-size: 14px;
  163. font-family: sans-serif;
  164. font-weight: 100;
  165. color: #ffffff;
  166. }
  167. .header .logocontainer {
  168. position: relative;
  169. display: inline-block;
  170. width: 15%;
  171. height: 100%;
  172. float: left;
  173. z-index: 101;
  174. }
  175. .header .logocontainer img {
  176. position: relative;
  177. display: block;
  178. width: 110px;
  179. margin: 55px auto;
  180. /*padding: 60px 0 0 25%;*/
  181. }
  182.  
  183.  
  184. .header .navigation .line {
  185. position: relative;
  186. display: inline-block;
  187. background-color: #000000;
  188. float: left;
  189. margin: 75px 20px 0px 20px;
  190. width: 1px;
  191. height: 35px;
  192. }
  193. .navigation-three {
  194. display: inline-block;
  195. position: relative;
  196. width: 13%;
  197. height: 100%;
  198. text-decoration: none;
  199. float: left;
  200. z-index: 101;
  201. }
  202.  
  203. .navigation-three .searchbar-container {
  204. position: relative;
  205. display: inline-block;
  206. width: 32px;
  207. height: 32px;
  208. background-color: transparent;
  209. box-sizing: border-box;
  210. float: left;
  211. margin: 30px 1% 0;
  212. }
  213. .navigation-three .searchbar {
  214. position: absolute;
  215. display: inline-block;
  216. width: 32px;
  217. height: 32px;
  218. background-color: transparent;
  219. border: 2px solid #8ec640;
  220. box-sizing: border-box;
  221. right: 0;
  222. top: 0;
  223. transition: width 0.5s ease;
  224. }
  225. .navigation-three .searchbar.toggled {
  226. width: 260px;
  227. }
  228. .navigation-three .searchbar img {
  229. position: absolute;
  230. width: 20px;
  231. height: 20px;
  232. top: 5px;
  233. right: 5px;
  234. }
  235. .navigation-three .searchbar input {
  236. position: absolute;
  237. top: 50%;
  238. left: 10px;
  239. width: 0;
  240. font-size: 12px;
  241. font-family: sans-serif;
  242. color: #8ec640;
  243. transform: translateY(-50%);
  244. border: 0;
  245. background-color: transparent;
  246. transition: width 0.5s ease;
  247. }
  248. .navigation-three .searchbar.toggled input {
  249. width: 220px; /* width of search bar extended minus left minus search image*/
  250. }
  251. .navigation-three .searchbar input:focus,
  252. .navigation-three .searchbar input:valid {
  253. box-shadow: none;
  254. outline: none;
  255. background-position: 0 0;
  256. }
  257.  
  258.  
  259. .navigation-three .shopbutton {
  260. position: relative;
  261. display: inline-block;
  262. height: 32px;
  263. background-color: #8ec640;
  264. float: left;
  265. margin: 30px 0 0;
  266. cursor: default;
  267. }
  268. .navigation-three .shopbutton .basket {
  269. width: 20px;
  270. height: 20px;
  271. margin: 5px 5px;
  272. float: left;
  273. }
  274. .navigation-three .shopbutton .arrow {
  275. width: 10px;
  276. height: 10px;
  277. margin: 10px 10px 5px 0;
  278. float: left;
  279. }
  280. .navigation-three .shopbutton h1 {
  281. font-size: 10px;
  282. font-weight: bold;
  283. font-family: sans-serif;
  284. color: #ffffff;
  285. float: left;
  286. width: auto;
  287. margin: 10px 10px 5px 0;
  288. }
  289. .navigation-three .shopbutton:hover .dropdown {
  290. max-height: 300%;
  291. border: 1px solid #8ec640;
  292. transition: max-height 0.5s ease-in-out, border 0s 0s ease;
  293. }
  294. .navigation-three .shopbutton .dropdown {
  295. position: absolute;
  296. display: inline-block;
  297. top: 100%;
  298. left: 0;
  299. width: 100%;
  300. z-index: 15;
  301. overflow: hidden;
  302. max-height: 0%;
  303. border: 0px solid #8ec640;
  304. transition: max-height 0.5s ease-in-out, border 0s 0.5s ease;
  305. box-sizing: border-box;
  306. }
  307. .navigation-three .shopbutton .dropdown .option {
  308. position: relative;
  309. display: inline-block;
  310. height: 30px;
  311. width: 100%;
  312. background-color: #ffffff;
  313. float: left;
  314. box-sizing: border-box;
  315. }
  316. .navigation-three .shopbutton .dropdown .option:hover h1 { color: #8ec640; margin:7px 0px 0 15px; }
  317. .navigation-three .shopbutton .dropdown .option h1 {
  318. font-size: 11px;
  319. font-weight: bold;
  320. font-family: sans-serif;
  321. color: #000000;
  322. float: left;
  323. width: auto;
  324. margin:7px 5px 0 10px;
  325. transition: color 0.2s ease, margin 0.3s ease;
  326. }
  327. .navigation-three .shopbutton .dropdown .option h2 {
  328. position: absolute;
  329. font-size: 14px;
  330. font-weight: bold;
  331. font-family: sans-serif;
  332. color: #000000;
  333. top: 5px;
  334. right: 5px;
  335. }
  336.  
  337.  
  338. .navigation-three .socialbuttons{
  339. position: relative;
  340. display: inline-block;
  341. width: 80%;
  342. margin: 10px 0;
  343. }
  344. .navigation-three .button{
  345. position: relative;
  346. display: inline-block;
  347. width: 30px;
  348. height: 30px;
  349. background-color: transparent;
  350. text-align: center;
  351. float: left;
  352. padding: 0 2%;
  353. }
  354. .navigation-three .button img {
  355. width: 16px;
  356. height: 16px;
  357. float: left;
  358. position: absolute;
  359. left: 12px;
  360. top: 7px;
  361. }
  362. .socialbuttons .button.b1 { border-right: 2px solid rgba(204,204,204, 1); }
  363. .socialbuttons .button.b2 { border-right: 2px solid rgba(204,204,204, 1); }
  364. .socialbuttons .button.b3 { border-right: 2px solid rgba(204,204,204, 1); }
  365.  
  366. .socialbuttons .button.b1 .b1col { opacity: 0; transition: opacity 0.5s ease; }
  367. .socialbuttons .button.b2 .b2col { opacity: 0; transition: opacity 0.5s ease; }
  368. .socialbuttons .button.b3 .b3col { opacity: 0; transition: opacity 0.5s ease; }
  369. .socialbuttons .button.b4 .b4col { opacity: 0; transition: opacity 0.5s ease; }
  370.  
  371. .socialbuttons .button.b1:hover .b1col { opacity: 1; }
  372. .socialbuttons .button.b2:hover .b2col { opacity: 1; }
  373. .socialbuttons .button.b3:hover .b3col { opacity: 1; }
  374. .socialbuttons .button.b4:hover .b4col { opacity: 1; }
  375.  
  376.  
  377.  
  378.  
  379. .submenu {
  380. position: absolute;
  381. display: inline-block;
  382. height: 220px;
  383. width: 100%;
  384. top: -100px;
  385. left: 999vw;
  386. background-color: #e8e8e8;
  387. transition: top 1s cubic-bezier(0.68, -0.55, 0.265, 1.55), left 100ms 1s ease;
  388. z-index: 10;
  389. }
  390. .submenu.visible {
  391. left: 0;
  392. top: 140px;
  393. transition: top 1s ease;
  394. }
  395.  
  396.  
  397. .submenu-five {
  398. height: 500px;
  399. top: -400px;
  400. }
  401. .submenu-five .contactus {
  402. position: relative;
  403. display: inline-block;
  404. width: 70%;
  405. height: 100%;
  406. margin: 0 10% 0 20%;
  407. float: left;
  408. }
  409. .submenu-five .contactus .column {
  410. margin-top: 40px;
  411. height: 64%;
  412. }
  413. .submenu-five .contactus .title {
  414. position: relative;
  415. display: inline-block;
  416. float: left;
  417. width: 100%;
  418. }
  419. .submenu-five .contactus .title h1 {
  420. color: #8ec640;
  421. font-size: 32px;
  422. font-weight: bold;
  423. font-family: 'Raleway', sans-serif;
  424. }
  425. .submenu-five .contactus .address {
  426. position: relative;
  427. display: inline-block;
  428. width: 25%;
  429. margin-top: 40px;
  430. float: left;
  431. }
  432. .submenu-five .contactus .address h1 {
  433. color: #545454; /* dark grey */
  434. padding: 4px 0;
  435. font-size: 12px;
  436. font-weight: 100;
  437. font-family: 'Raleway', sans-serif;
  438. }
  439. .submenu-five .contactus .form {
  440. position: relative;
  441. display: inline-block;
  442. width: 50%;
  443. margin-top: 40px;
  444. float: left;
  445. }
  446. .submenu-five .contactus .form h1 {
  447. color: #545454; /* dark grey */
  448. padding: 4px 20px;
  449. font-size: 12px;
  450. font-weight: 100;
  451. font-family: 'Raleway', sans-serif;
  452. }
  453. .submenu-five .contactus .form h1:nth-child(2) { margin: 10px 0; }
  454. .submenu-five .contactus .form form {
  455. position: relative;
  456. display: inline-block;
  457. float: left;
  458. padding: 0 20px;
  459. }
  460. .submenu-five .contactus .form input {
  461. color: #8ec640;
  462. font-size: 12px;
  463. border: none;
  464. padding: 9px 5px;
  465. margin: 3px 0;
  466. float: left;
  467. background-color: #ffffff;
  468. border-radius: 2px;
  469. font-family: arial;
  470. }
  471. .submenu-five .contactus .form input:focus,
  472. .submenu-five .contactus .form input:valid {
  473. box-shadow: none;
  474. outline: none;
  475. background-position: 0 0;
  476. }
  477. .submenu-five .contactus .form input:nth-child(1) { width: 30%; }
  478. .submenu-five .contactus .form input:nth-child(2) { width: 58%; float: right;}
  479. .submenu-five .contactus .form input:nth-child(3) { width: 30%; }
  480. .submenu-five .contactus .form input:nth-child(4) { width: 58%; float: right; }
  481. .submenu-five .contactus .form input:nth-child(6) { font-size: 14px; padding: 5px 20px; font-family: 'Raleway'; background-color: #8ec640; color: #ffffff; }
  482. .submenu-five .contactus .form textarea {
  483. float: left;
  484. font-family: arial;
  485. font-size: 12px;
  486. color: #8ec640;
  487. background-color: #ffffff;
  488. border: none;
  489. padding: 9px 5px;
  490. margin: 3px 0;
  491. width: 98.5%;
  492. height: 100px;
  493. border-radius: 2px;
  494. resize: none;
  495. -webkit-box-shadow: none;
  496. box-shadow: none;
  497. outline: none;
  498. border-top: transparent !important;
  499. border-left: transparent !important;
  500. border-right: transparent !important;
  501. border-bottom: transparent !important;
  502. }
  503. .submenu-five .contactus .map {
  504. position: relative;
  505. display: inline-block;
  506. margin-top: 40px;
  507. margin-left: 20px;
  508. float: left;
  509. }
  510. .submenu .shopbutton {
  511. position: absolute;
  512. display: inline-block;
  513. height: 32px;
  514. background-color: #8ec640;
  515. float: left;
  516. bottom: 0px;
  517. right: 0px;
  518. cursor: default;
  519. }
  520. .submenu .shopbutton .basket {
  521. width: 20px;
  522. height: 20px;
  523. margin: 5px 5px;
  524. float: left;
  525. }
  526. .submenu .shopbutton .arrow {
  527. width: 15px;
  528. height: 15px;
  529. margin: 7.5px 15px 7.5px 5px;
  530. float: left;
  531. transition: margin 0.2s cubic-bezier(0.49, 0.21, 0.4, 0.91);
  532. }
  533. .submenu .shopbutton:hover .arrow {
  534. margin: 7.5px 5px 7.5px 15px;
  535. }
  536. .submenu .description .shopbutton h1 {
  537. font-size: 10px;
  538. font-weight: bold;
  539. font-family: sans-serif;
  540. color: #ffffff;
  541. float: left;
  542. width: auto;
  543. margin: 10px 10px 5px 0;
  544. }
  545.  
  546.  
  547.  
  548.  
  549. #RyansMap {
  550. height:300px;
  551. width:250px;
  552. margin: 0;
  553. }
  554. .gm-style-iw * {
  555. display: block;
  556. width: 100%;
  557. }
  558. .gm-style-iw h4, .gm-style-iw p {
  559. margin: 0;
  560. padding: 0;
  561. }
  562. .gm-style-iw a {
  563. color: #4272db;
  564. }
  565. .submenu .sidenav, .submenu .menuoptioncontainer {
  566. position: relative;
  567. display: inline-block;
  568. height: 80%;
  569. width: 20%;
  570. margin-top: 30px;
  571. float: left;
  572. }
  573. .submenu .sidenav { margin-left: 20%; }
  574. .submenu .menuoptioncontainer { width: 40%; }
  575.  
  576. .submenu .sidenav a {
  577. position: relative;
  578. display: inline-block;
  579. text-decoration: none;
  580. text-align: left;
  581. float: right;
  582. width: 70%;
  583. padding: 10px 0;
  584. }
  585. .submenu .sidenav h1 {
  586. font-size: 14px;
  587. font-family: sans-serif;
  588. font-weight: 200;
  589. color: #8ec640;
  590. }
  591. .submenu .sidenav a:hover h1, .sidenav .selected h1{
  592. color: #000000;
  593. }
  594. .menuoption {
  595. position: absolute;
  596. display: inline-block;
  597. width: 100%;
  598. height: 100%;
  599. left: 0;
  600. float: left;
  601. transition: opacity 1s ease;
  602. }
  603. .menuoption.invisible {
  604. opacity: 0;
  605. left: 9999vw;
  606. }
  607. .header .column {
  608. position: relative;
  609. display: inline-block;
  610. float: left;
  611. height: 100%;
  612. background-color: rgba(0,0,0,0.2);
  613. width: 1px;
  614. }
  615. .menuoption .description {
  616. position: relative;
  617. display: inline-block;
  618. height: 100%;
  619. width: 40%;
  620. margin: 0 4%;
  621. float: left;
  622. background-color: #e8e8e8;
  623. }
  624. .menuoption .description h1 {
  625. font-size: 14px;
  626. font-family: sans-serif;
  627. font-weight: 100;
  628. color: rgba(0,0,0,0.6);
  629. }
  630. .menuoption .imagecontainer {
  631. position: relative;
  632. display: inline-block;
  633. height: 100%;
  634. width: 50%;
  635. float: left;
  636. }
  637. .menuoption .imagecontainer img {
  638. height: 100%;
  639. margin: 0 10%;
  640. }
  641.  
  642.  
  643.  
  644.  
  645.  
  646.  
  647.  
  648.  
  649. .footer {
  650. position: relative;
  651. display: inline-block;
  652. background-color: #f47d31;
  653. color: #ffffff;
  654. width: 100%;
  655. height: 300px;
  656. float: left;
  657. z-index: 200;
  658. }
  659. .footer .container {
  660. position: relative;
  661. display: inline-block;
  662. width: 28%;
  663. height: 250px;
  664. float: left;
  665. }
  666. .footer .container.footerlinks {
  667. width: 72%;
  668. }
  669. .footer .container.subcont {
  670. width: 188px;
  671. margin-right: 12%;
  672. margin-top: 50px;
  673. }
  674. .footer .imagecontainer {
  675. position: absolute;
  676. display: inline-block;
  677. height: 70px;
  678. top: 50px;
  679. left: 20%;
  680. bottom: 0;
  681. right: 0;
  682. }
  683. .footer .imagecontainer img {
  684. height: 100%;
  685. }
  686. .footer .container.subcont h1 {
  687. font-size: 17px;
  688. font-weight: 600;
  689. font-family: sans-serif;
  690. color: #ffffff;
  691. padding-bottom: 10px;
  692. border-bottom: 1px solid #ffffff;
  693. margin-bottom: 10px;
  694. }
  695. .footer .container.subcont a {
  696. position: relative;
  697. display: inline-block;
  698. font-size: 13px;
  699. width: 100%;
  700. font-weight: 100;
  701. font-family: sans-serif;
  702. color: #ffffff;
  703. text-decoration: none;
  704. float: left;
  705. padding: 10px 0;
  706. }
  707. .footer .container.subcont a:after {
  708. content: ' ';
  709. display: block;
  710. position: absolute;
  711. width: 0%;
  712. height: 2px;
  713. bottom: 0px;
  714. left: 0;
  715. background-color: #ffffff;
  716. transition: width 0.3s ease;
  717. }
  718. .footer .container.subcont a:hover:after {
  719. width: 100%;
  720. transition: width 0.6s ease;
  721. }
  722. .footer .container.subcont h2 {
  723. /* address */
  724. font-size: 13px;
  725. width: 100%;
  726. font-weight: 100;
  727. font-family: sans-serif;
  728. color: #ffffff;
  729. text-decoration: none;
  730. float: left;
  731. margin: 10px 0;
  732. }
  733.  
  734. /* very bottom (small) footer */
  735. .footer-2 {
  736. position: relative;
  737. display: inline-block;
  738. background-color: #f47d31;
  739. color: #ffffff;
  740. width: 100%;
  741. height: 100px;
  742. padding: 20px 0 0 0;
  743. float: left;
  744. z-index: 200;
  745. }
  746. .footer-2 .socialcontainer {
  747. position: relative;
  748. display: inline-block;
  749. color: #ffffff;
  750. width: 28%;
  751. float: left;
  752. }
  753. .footer-2 .socialcontainer .smallcont {
  754. position: relative;
  755. display: inline-block;
  756. float: left;
  757. margin-left: 20%;
  758. }
  759. .navigation-three .socialbuttons,
  760. .footer-2 .socialbuttons {
  761. position: relative;
  762. display: inline-block;
  763. width: 100%;
  764. margin: 10px 0;
  765. }
  766. .navigation-three .button,
  767. .footer-2 .button {
  768. position: relative;
  769. display: inline-block;
  770. width: 30px;
  771. height: 30px;
  772. background-color: transparent;
  773. text-align: center;
  774. float: left;
  775. padding: 0 2%;
  776. }
  777. .navigation-three .button img,
  778. .footer-2 .button img {
  779. width: 16px;
  780. height: 16px;
  781. float: left;
  782. position: absolute;
  783. left: 12px;
  784. top: 7px;
  785. }
  786.  
  787.  
  788. .footer-2 .socialcontainer h1 {
  789. position: relative;
  790. display: inline-block;
  791. color: #ffffff;
  792. font-family: sans-serif;
  793. font-weight: 100;
  794. font-size: 14px;
  795. width: 100%;
  796. }
  797. .footer-2 .button {
  798. position: relative;
  799. display: inline-block;
  800. width: 30px;
  801. height: 30px;
  802. background-color: transparent;
  803. text-align: center;
  804. float: left;
  805. padding: 0 2%;
  806. }
  807. .footer-2 .button img {
  808. position: absolute;
  809. display: inline-block;
  810. width: 16px;
  811. height: 16px;
  812. top: 50%;
  813. left: 50%;
  814. transform: translate(-50%,-50%);
  815. }
  816. .footer-2 .middlelinks {
  817. position: relative;
  818. display: inline-block;
  819. width: 40%;
  820. float: left;
  821. }
  822. .footer-2 .middlelinks a {
  823. position: relative;
  824. display: inline-block;
  825. color: #ffffff;
  826. font-family: sans-serif;
  827. font-weight: 100;
  828. font-size: 14px;
  829. margin: 40px 0 0 0;
  830. padding: 0 10px;
  831. float: left;
  832. text-decoration: none;
  833. }
  834. .footer-2 .middlelinks a:nth-child(1) { border-right: 1px solid #ffffff; padding: 0 10px 0 0; }
  835. .footer-2 .middlelinks a:nth-child(2) { border-right: 1px solid #ffffff; }
  836. .footer-2 .middlelinks a:nth-child(3) { border-right: 1px solid #ffffff; }
  837. .footer-2 .copyright {
  838. position: relative;
  839. display: inline-block;
  840. width: 24%;
  841. float: left;
  842. }
  843. .footer-2 .copyright h2 {
  844. position: relative;
  845. display: inline-block;
  846. color: #ffffff;
  847. font-family: sans-serif;
  848. font-weight: 100;
  849. font-size: 14px;
  850. padding: 40px 0 0 0;
  851. width: 100%;
  852. float: left;
  853. text-align: center;
  854. }
  855.  
  856.  
  857. .header .nav-mobile-button {
  858. position: absolute;
  859. display: inline-block;
  860. right: 30px;
  861. top: 50%;
  862. height: 28px;
  863. width: 41px;
  864. transform: translate(-50%, -50%);
  865. background-color: transparent;
  866. opacity: 0; /* hidden and disable if not on phones*/
  867. display: none;
  868. z-index: 1;
  869. }
  870. .header .nav-mobile-button .line {
  871. position: absolute;
  872. display: inline-block;
  873. height: 4px;
  874. left: 0;
  875. width: 100%;
  876. background-color: #6e6e6e;
  877. margin: 0;
  878. float: none;
  879. }
  880. .header .nav-mobile-button .line.l1 { top: 0px; }
  881. .header .nav-mobile-button .line.l2 { top: 12px; }
  882. .header .nav-mobile-button .line.l3 { top: 24px; }
  883.  
  884.  
  885.  
  886. /* MEDIA QUERIES */
  887.  
  888.  
  889.  
  890. /* ----------------------------------------------------*/
  891. /* Code That Doesnt Change Between Mobile Resolution */
  892. /* ----------------------------------------------------*/
  893. @media only screen and (min-width : 0px) and (max-width : 992px) {
  894. .header .submenu { display: none; }
  895. .header .navigation { display: none; }
  896. .header .navigation-three { display: none; }
  897. .header.navigation-toggled:after {
  898. content: ' ';
  899. position: absolute;
  900. display: block;
  901. top: 0;
  902. left: 0;
  903. width: 100vw;
  904. background-color: #e8e8e8;
  905. height: 100%;
  906. -webkit-box-shadow: -1vw 10px 38px 0px rgba(0, 0, 0, 0.13);
  907. -moz-box-shadow: -1vw 10px 38px 0px rgba(0, 0, 0, 0.13);
  908. box-shadow: -1vw 10px 38px 0px rgba(0, 0, 0, 0.13);
  909. }
  910. .header.navigation-toggled:before {
  911. content: ' ';
  912. position: absolute;
  913. display: block;
  914. top: 0;
  915. left: 0;
  916. width: 100vw;
  917. background-color: rgb(229, 229, 229);
  918. height: 100vh;
  919. }
  920. .header .nav-mobile-button { opacity: 1; display: inline-block; }
  921. .header .nav-mobile-button .line.l1 { transition: transform 0.5s ease, opacity 0.5s ease; }
  922. .header .nav-mobile-button .line.l2 { transition: transform 0.5s ease, opacity 0.5s ease;3 }
  923. .header .nav-mobile-button .line.l3 { transition: transform 0.5s ease, opacity 0.5s ease; }
  924. .header .nav-mobile-button.toggled .line.l1{ transition: transform 0.5s ease; transform: translateY(12px) rotate(45deg); }
  925. .header .nav-mobile-button.toggled .line.l2{ transition: transform 0.5s ease; opacity: 0; }
  926. .header .nav-mobile-button.toggled .line.l3{ transition: transform 0.5s ease; transform: translateY(-12px) rotate(-45deg); }
  927. .header.navigation-toggled .side-navigation { display: none; }
  928. .header {
  929. height: 88px !important;
  930. -webkit-box-shadow: -1vw 10px 38px 0px rgba(0, 0, 0, 0.13);
  931. -moz-box-shadow: -1vw 10px 38px 0px rgba(0, 0, 0, 0.13);
  932. box-shadow: -1vw 10px 38px 0px rgba(0, 0, 0, 0.13);
  933. }
  934. .header .logocontainer img {
  935. position: absolute;
  936. top: 50%;
  937. transform: translateY(-50%);
  938. left: 20px;
  939. margin: 0;
  940. }
  941. .bodycontainer {
  942. margin-left: 0 !important;
  943. margin-top: 88px !important;
  944. width: 100% !important;
  945. }
  946. .footer { z-index: 10; }
  947. .footer-2 { z-index: 10; }
  948. }
  949.  
  950.  
  951. /* ----------------------------------------------------*/
  952. /* Custom, iPhone Retina */
  953. /* ----------------------------------------------------*/
  954. @media only screen and (max-width : 320px) {
  955. body::before {
  956. content: "max-width : 320px fired";
  957. display: block; text-align: center;
  958. background: rgba(255, 255, 0, 0.48); width: 100%;
  959. position: fixed;
  960. top: 0; left: 0;
  961. z-index: 9999;
  962. }
  963.  
  964. .container .footer { display: none; }
  965. .header.navigation-toggled .mainbutton1 h1,
  966. .header.navigation-toggled .mainbutton2 h1,
  967. .header.navigation-toggled .mainbutton3 h1,
  968. .header.navigation-toggled .mainbutton4 h1,
  969. .header.navigation-toggled .mainbutton5 h1,
  970. .header.navigation-toggled .mainbutton6 h1 { font-size: 10vw; opacity: 1; }
  971.  
  972. .container .footer { display: none; }
  973. .container .footer-2 .middlelinks { display: none; }
  974. .container .footer-2 .socialcontainer { text-align: center; width: 100%; }
  975. .container .footer-2 .socialcontainer .smallcont { margin-left: 0; width: 100%; }
  976. .container .footer-2 .socialcontainer .smallcont .socialbuttons { margin-left: 0; width: 100%; text-align: center; }
  977. .container .footer-2 .socialcontainer .smallcont .socialbuttons .button { float: none; border: 0; margin: 0 0; padding: 0; }
  978. .container .footer-2 .copyright { width: 100%; }
  979. .container .footer-2 .copyright h2 { padding: 0; }
  980.  
  981. }
  982.  
  983.  
  984. /* ----------------------------------------------------*/
  985. /* Extra Small Devices, Phones */
  986. /* ----------------------------------------------------*/
  987. @media only screen and (min-width : 320px) and (max-width : 480px) {
  988. body::before {
  989. content: "max-width : 480px fired";
  990. display: block; text-align: center;
  991. background: rgba(255, 255, 0, 0.48); width: 100%;
  992. position: fixed;
  993. top: 0; left: 0;
  994. z-index: 9999;
  995. }
  996.  
  997. .header.navigation-toggled .mainbutton1 h1,
  998. .header.navigation-toggled .mainbutton2 h1,
  999. .header.navigation-toggled .mainbutton3 h1,
  1000. .header.navigation-toggled .mainbutton4 h1,
  1001. .header.navigation-toggled .mainbutton5 h1,
  1002. .header.navigation-toggled .mainbutton6 h1 { font-size: 5vw; opacity: 1; }
  1003.  
  1004. .container .footer { display: none; }
  1005. .container .footer-2 .middlelinks { display: none; }
  1006. .container .footer-2 .socialcontainer { text-align: center; width: 100%; }
  1007. .container .footer-2 .socialcontainer .smallcont { margin-left: 0; width: 100%; }
  1008. .container .footer-2 .socialcontainer .smallcont .socialbuttons { margin-left: 0; width: 100%; text-align: center; }
  1009. .container .footer-2 .socialcontainer .smallcont .socialbuttons .button { float: none; border: 0; margin: 0 0; padding: 0; }
  1010. .container .footer-2 .copyright { width: 100%; }
  1011. .container .footer-2 .copyright h2 { padding: 0; }
  1012. }
  1013.  
  1014.  
  1015. /* ----------------------------------------------------*/
  1016. /* Small Devices, Tablets */
  1017. /* ----------------------------------------------------*/
  1018. @media only screen and (min-width : 480px) and (max-width : 768px) {
  1019. body::before {
  1020. content: "max-width : 768px fired";
  1021. display: block; text-align: center;
  1022. background: rgba(255, 255, 0, 0.48); width: 100%;
  1023. position: fixed;
  1024. top: 0; left: 0;
  1025. z-index: 9999;
  1026. }
  1027. .header.navigation-toggled .mainbutton1 h1,
  1028. .header.navigation-toggled .mainbutton2 h1,
  1029. .header.navigation-toggled .mainbutton3 h1,
  1030. .header.navigation-toggled .mainbutton4 h1,
  1031. .header.navigation-toggled .mainbutton5 h1,
  1032. .header.navigation-toggled .mainbutton6 h1 { font-size: 4vw; opacity: 1; }
  1033.  
  1034. .container .footer { display: none; }
  1035. .container .footer-2 .middlelinks { display: none; }
  1036. .container .footer-2 .socialcontainer { width: 50%; }
  1037. .container .footer-2 .copyright { width: 50%; }
  1038. }
  1039.  
  1040.  
  1041. /* ----------------------------------------------------*/
  1042. /* Medium Devices, Desktops */
  1043. /* ----------------------------------------------------*/
  1044. @media only screen and (min-width : 768px) and (max-width : 992px) {
  1045. body::before {
  1046. content: "max-width : 992px fired";
  1047. display: block; text-align: center;
  1048. background: rgba(255, 255, 0, 0.48); width: 100%;
  1049. position: fixed;
  1050. top: 0; left: 0;
  1051. z-index: 9999;
  1052. }
  1053.  
  1054. .header.navigation-toggled .mainbutton1 h1,
  1055. .header.navigation-toggled .mainbutton2 h1,
  1056. .header.navigation-toggled .mainbutton3 h1,
  1057. .header.navigation-toggled .mainbutton4 h1,
  1058. .header.navigation-toggled .mainbutton5 h1,
  1059. .header.navigation-toggled .mainbutton6 h1 { font-size: 4vw; opacity: 1; }
  1060.  
  1061.  
  1062. .container .footer .container.logo { display: none; }
  1063. .container .footer .container.footerlinks { width: 72%; text-align: left; }
  1064. .container .footer .container.footerlinks .subcont { margin-right: 4%; margin-top: 50px; width: 160px; }
  1065.  
  1066. .container .footer-2 .socialcontainer { width: 25%; }
  1067. .container .footer-2 .middlelinks { width: 59%; text-align: center; }
  1068. .container .footer-2 .middlelinks a { float: none; }
  1069. .container .footer-2 .copyright { width: 15%; }
  1070. }
  1071.  
  1072.  
  1073. /* ----------------------------------------------------*/
  1074. /* Large Devices, Wide Screens */
  1075. /* ----------------------------------------------------*/
  1076. @media only screen and (min-width : 992px) and (max-width : 1200px) {
  1077. body::before {
  1078. content: "max-width : 1200px fired";
  1079. display: block; text-align: center;
  1080. background: rgba(255, 255, 0, 0.48); width: 100%;
  1081. position: fixed;
  1082. top: 0; left: 0;
  1083. z-index: 9999;
  1084. }
  1085.  
  1086. .header .navigation { width: 68%; }
  1087. .header .navigation-three { width: 17%; }
  1088. .container .footer .container.subcont { margin-right: 5%; }
  1089. .container .footer-2 .copyright { float: right; }
  1090. .container .footer-2 .middlelinks { width: 47%; }
  1091. }
  1092.  
  1093. /* ----------------------------------------------------*/
  1094. /* SPECIAL */
  1095. /* ----------------------------------------------------*/
  1096. @media only screen and (min-width : 1200px) and (max-width : 1300px) {
  1097. .footer .container.subcont { margin-right: 5%; }
  1098. }
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!