API tools faq
paste
RyanEarnshaw

Untitled

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