API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Feb 21st, 2017
56
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.56 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: 30px 0 0 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 img {
  267. width: 20px;
  268. height: 20px;
  269. margin: 5px 5px;
  270. float: left;
  271. }
  272. .navigation-three .shopbutton h1,
  273. .navigation-three .shopbutton h2 {
  274. font-size: 10px;
  275. font-weight: bold;
  276. font-family: sans-serif;
  277. color: #ffffff;
  278. float: left;
  279. width: auto;
  280. margin: 10px 10px 5px 0;
  281. }
  282. .navigation-three .shopbutton:hover .dropdown {
  283. max-height: 300%;
  284. transition: max-height 0.5s linear;
  285. }
  286. .navigation-three .shopbutton .dropdown {
  287. position: absolute;
  288. display: inline-block;
  289. top: 100%;
  290. left: 0;
  291. width: 120%;
  292. z-index: 15;
  293. overflow: hidden;
  294. max-height: 0%;
  295. transition: max-height 0.2s linear;
  296. -webkit-box-shadow: 0px 0px 19px -4px rgba(0,0,0,0.75);
  297. -moz-box-shadow: 0px 0px 19px -4px rgba(0,0,0,0.75);
  298. box-shadow: 0px 0px 19px -4px rgba(0,0,0,0.75);
  299. }
  300. .navigation-three .shopbutton .dropdown .option {
  301. position: relative;
  302. display: inline-block;
  303. height: 30px;
  304. width: 100%;
  305. background-color: #ffffff;
  306. border: 1px solid #8ec640;
  307. float: left;
  308. }
  309. .navigation-three .shopbutton .dropdown .option:hover h1,
  310. .navigation-three .shopbutton .dropdown .option:hover h2 { color: #8ec640; }
  311. .navigation-three .shopbutton .dropdown .option h1,
  312. .navigation-three .shopbutton .dropdown .option h2 {
  313. font-size: 12px;
  314. font-weight: bold;
  315. font-family: sans-serif;
  316. color: #000000;
  317. float: left;
  318. width: auto;
  319. margin: 10px 0 0 10px;
  320. transition: color 0.3s ease, margin 0.3s ease;
  321. }
  322. .navigation-three .shopbutton .dropdown .option h2 {
  323. float: right;
  324. margin: 10px 10px 5px 0;
  325. }
  326. .navigation-three .shopbutton .dropdown .option:hover h2 {
  327. margin: 10px 5px 5px 0;
  328. }
  329.  
  330. .navigation-three .socialbuttons{
  331. position: relative;
  332. display: inline-block;
  333. width: 80%;
  334. margin: 10px 0;
  335. }
  336. .navigation-three .button{
  337. position: relative;
  338. display: inline-block;
  339. width: 30px;
  340. height: 30px;
  341. background-color: transparent;
  342. text-align: center;
  343. float: left;
  344. padding: 0 2%;
  345. }
  346. .navigation-three .button img {
  347. width: 16px;
  348. height: 16px;
  349. float: left;
  350. position: absolute;
  351. left: 12px;
  352. top: 7px;
  353. }
  354. .socialbuttons .button.b1 { border-right: 2px solid rgba(204,204,204, 1); }
  355. .socialbuttons .button.b2 { border-right: 2px solid rgba(204,204,204, 1); }
  356. .socialbuttons .button.b3 { border-right: 2px solid rgba(204,204,204, 1); }
  357.  
  358. .socialbuttons .button.b1 .b1col { opacity: 0; transition: opacity 0.5s ease; }
  359. .socialbuttons .button.b2 .b2col { opacity: 0; transition: opacity 0.5s ease; }
  360. .socialbuttons .button.b3 .b3col { opacity: 0; transition: opacity 0.5s ease; }
  361. .socialbuttons .button.b4 .b4col { opacity: 0; transition: opacity 0.5s ease; }
  362.  
  363. .socialbuttons .button.b1:hover .b1col { opacity: 1; }
  364. .socialbuttons .button.b2:hover .b2col { opacity: 1; }
  365. .socialbuttons .button.b3:hover .b3col { opacity: 1; }
  366. .socialbuttons .button.b4:hover .b4col { opacity: 1; }
  367.  
  368.  
  369.  
  370.  
  371. .submenu {
  372. position: absolute;
  373. display: inline-block;
  374. height: 220px;
  375. width: 100%;
  376. top: -100px;
  377. left: 999vw;
  378. background-color: #e8e8e8;
  379. transition: top 1s cubic-bezier(0.68, -0.55, 0.265, 1.55), left 100ms 1s ease;
  380. z-index: 10;
  381. }
  382. .submenu.visible {
  383. left: 0;
  384. top: 140px;
  385. transition: top 1s ease;
  386. }
  387.  
  388.  
  389. .submenu-five {
  390. height: 500px;
  391. top: -400px;
  392. }
  393. .submenu-five .contactus {
  394. position: relative;
  395. display: inline-block;
  396. width: 70%;
  397. height: 100%;
  398. margin: 0 10% 0 20%;
  399. float: left;
  400. }
  401. .submenu-five .contactus .column {
  402. margin-top: 40px;
  403. height: 64%;
  404. }
  405. .submenu-five .contactus .title {
  406. position: relative;
  407. display: inline-block;
  408. float: left;
  409. width: 100%;
  410. }
  411. .submenu-five .contactus .title h1 {
  412. color: #8ec640;
  413. font-size: 32px;
  414. font-weight: bold;
  415. font-family: 'Raleway', sans-serif;
  416. }
  417. .submenu-five .contactus .address {
  418. position: relative;
  419. display: inline-block;
  420. width: 25%;
  421. margin-top: 40px;
  422. float: left;
  423. }
  424. .submenu-five .contactus .address h1 {
  425. color: #545454; /* dark grey */
  426. padding: 4px 0;
  427. font-size: 12px;
  428. font-weight: 100;
  429. font-family: 'Raleway', sans-serif;
  430. }
  431. .submenu-five .contactus .form {
  432. position: relative;
  433. display: inline-block;
  434. width: 50%;
  435. margin-top: 40px;
  436. float: left;
  437. }
  438. .submenu-five .contactus .form h1 {
  439. color: #545454; /* dark grey */
  440. padding: 4px 20px;
  441. font-size: 12px;
  442. font-weight: 100;
  443. font-family: 'Raleway', sans-serif;
  444. }
  445. .submenu-five .contactus .form h1:nth-child(2) { margin: 10px 0; }
  446. .submenu-five .contactus .form form {
  447. position: relative;
  448. display: inline-block;
  449. float: left;
  450. padding: 0 20px;
  451. }
  452. .submenu-five .contactus .form input {
  453. color: #8ec640;
  454. font-size: 12px;
  455. border: none;
  456. padding: 9px 5px;
  457. margin: 3px 0;
  458. float: left;
  459. background-color: #ffffff;
  460. border-radius: 2px;
  461. font-family: arial;
  462. }
  463. .submenu-five .contactus .form input:focus,
  464. .submenu-five .contactus .form input:valid {
  465. box-shadow: none;
  466. outline: none;
  467. background-position: 0 0;
  468. }
  469. .submenu-five .contactus .form input:nth-child(1) { width: 30%; }
  470. .submenu-five .contactus .form input:nth-child(2) { width: 58%; float: right;}
  471. .submenu-five .contactus .form input:nth-child(3) { width: 30%; }
  472. .submenu-five .contactus .form input:nth-child(4) { width: 58%; float: right; }
  473. .submenu-five .contactus .form input:nth-child(6) { font-size: 14px; padding: 5px 20px; font-family: 'Raleway'; background-color: #8ec640; color: #ffffff; }
  474. .submenu-five .contactus .form textarea {
  475. float: left;
  476. font-family: arial;
  477. font-size: 12px;
  478. color: #8ec640;
  479. background-color: #ffffff;
  480. border: none;
  481. padding: 9px 5px;
  482. margin: 3px 0;
  483. width: 98.5%;
  484. height: 100px;
  485. border-radius: 2px;
  486. resize: none;
  487. -webkit-box-shadow: none;
  488. box-shadow: none;
  489. outline: none;
  490. border-top: transparent !important;
  491. border-left: transparent !important;
  492. border-right: transparent !important;
  493. border-bottom: transparent !important;
  494. }
  495. .submenu-five .contactus .map {
  496. position: relative;
  497. display: inline-block;
  498. margin-top: 40px;
  499. margin-left: 20px;
  500. float: left;
  501. }
  502.  
  503. #RyansMap {
  504. height:300px;
  505. width:250px;
  506. margin: 0;
  507. }
  508. .gm-style-iw * {
  509. display: block;
  510. width: 100%;
  511. }
  512. .gm-style-iw h4, .gm-style-iw p {
  513. margin: 0;
  514. padding: 0;
  515. }
  516. .gm-style-iw a {
  517. color: #4272db;
  518. }
  519. .submenu .sidenav, .submenu .menuoptioncontainer {
  520. position: relative;
  521. display: inline-block;
  522. height: 80%;
  523. width: 20%;
  524. margin-top: 30px;
  525. float: left;
  526. }
  527. .submenu .sidenav { margin-left: 20%; }
  528. .submenu .menuoptioncontainer { width: 40%; }
  529.  
  530. .submenu .sidenav a {
  531. position: relative;
  532. display: inline-block;
  533. text-decoration: none;
  534. text-align: left;
  535. float: right;
  536. width: 70%;
  537. padding: 10px 0;
  538. }
  539. .submenu .sidenav h1 {
  540. font-size: 14px;
  541. font-family: 'Raleway';
  542. font-weight: 200;
  543. color: #8ec640;
  544. }
  545. .submenu .sidenav a:hover h1, .sidenav .selected h1{
  546. color: #000000;
  547. }
  548. .menuoption {
  549. position: absolute;
  550. display: inline-block;
  551. width: 100%;
  552. height: 100%;
  553. float: left;
  554. transition: opacity 1s ease;
  555. }
  556. .menuoption.invisible {
  557. opacity: 0;
  558. }
  559. .header .column {
  560. position: relative;
  561. display: inline-block;
  562. float: left;
  563. height: 100%;
  564. background-color: rgba(0,0,0,0.2);
  565. width: 1px;
  566. }
  567. .menuoption .description {
  568. position: relative;
  569. display: inline-block;
  570. height: 100%;
  571. width: 40%;
  572. margin: 0 4%;
  573. float: left;
  574. background-color: #e8e8e8;
  575. }
  576. .menuoption .description h1 {
  577. font-size: 14px;
  578. font-family: sans-serif;
  579. font-weight: 100;
  580. color: rgba(0,0,0,0.6);
  581. }
  582. .menuoption .imagecontainer {
  583. position: relative;
  584. display: inline-block;
  585. height: 100%;
  586. width: 50%;
  587. float: left;
  588. }
  589. .menuoption .imagecontainer img {
  590. height: 100%;
  591. margin: 0 10%;
  592. }
  593.  
  594.  
  595.  
  596.  
  597.  
  598.  
  599.  
  600.  
  601. .footer {
  602. position: relative;
  603. display: inline-block;
  604. background-color: #f47d31;
  605. color: #ffffff;
  606. width: 100%;
  607. height: 300px;
  608. float: left;
  609. z-index: 200;
  610. }
  611. .footer .container {
  612. position: relative;
  613. display: inline-block;
  614. width: 28%;
  615. height: 250px;
  616. float: left;
  617. }
  618. .footer .container.footerlinks {
  619. width: 72%;
  620. }
  621. .footer .container.subcont {
  622. width: 188px;
  623. margin-right: 12%;
  624. margin-top: 50px;
  625. }
  626. .footer .imagecontainer {
  627. position: absolute;
  628. display: inline-block;
  629. height: 70px;
  630. top: 50px;
  631. left: 20%;
  632. bottom: 0;
  633. right: 0;
  634. }
  635. .footer .imagecontainer img {
  636. height: 100%;
  637. }
  638. .footer .container.subcont h1 {
  639. font-size: 17px;
  640. font-weight: 600;
  641. font-family: sans-serif;
  642. color: #ffffff;
  643. padding-bottom: 10px;
  644. border-bottom: 1px solid #ffffff;
  645. margin-bottom: 10px;
  646. }
  647. .footer .container.subcont a {
  648. position: relative;
  649. display: inline-block;
  650. font-size: 13px;
  651. width: 100%;
  652. font-weight: 100;
  653. font-family: sans-serif;
  654. color: #ffffff;
  655. text-decoration: none;
  656. float: left;
  657. padding: 10px 0;
  658. }
  659. .footer .container.subcont a:after {
  660. content: ' ';
  661. display: block;
  662. position: absolute;
  663. width: 0%;
  664. height: 2px;
  665. bottom: 0px;
  666. left: 0;
  667. background-color: #ffffff;
  668. transition: width 0.3s ease;
  669. }
  670. .footer .container.subcont a:hover:after {
  671. width: 100%;
  672. transition: width 0.6s ease;
  673. }
  674. .footer .container.subcont h2 {
  675. /* address */
  676. font-size: 13px;
  677. width: 100%;
  678. font-weight: 100;
  679. font-family: sans-serif;
  680. color: #ffffff;
  681. text-decoration: none;
  682. float: left;
  683. margin: 10px 0;
  684. }
  685.  
  686. /* very bottom (small) footer */
  687. .footer-2 {
  688. position: relative;
  689. display: inline-block;
  690. background-color: #f47d31;
  691. color: #ffffff;
  692. width: 100%;
  693. height: 100px;
  694. padding: 20px 0 0 0;
  695. float: left;
  696. z-index: 200;
  697. }
  698. .footer-2 .socialcontainer {
  699. position: relative;
  700. display: inline-block;
  701. color: #ffffff;
  702. width: 28%;
  703. float: left;
  704. }
  705. .footer-2 .socialcontainer .smallcont {
  706. position: relative;
  707. display: inline-block;
  708. float: left;
  709. margin-left: 20%;
  710. }
  711. .navigation-three .socialbuttons,
  712. .footer-2 .socialbuttons {
  713. position: relative;
  714. display: inline-block;
  715. width: 80%;
  716. margin: 10px 0;
  717. }
  718. .navigation-three .button,
  719. .footer-2 .button {
  720. position: relative;
  721. display: inline-block;
  722. width: 30px;
  723. height: 30px;
  724. background-color: transparent;
  725. text-align: center;
  726. float: left;
  727. padding: 0 2%;
  728. }
  729. .navigation-three .button img,
  730. .footer-2 .button img {
  731. width: 16px;
  732. height: 16px;
  733. float: left;
  734. position: absolute;
  735. left: 12px;
  736. top: 7px;
  737. }
  738.  
  739.  
  740. .footer-2 .socialcontainer h1 {
  741. position: relative;
  742. display: inline-block;
  743. color: #ffffff;
  744. font-family: sans-serif;
  745. font-weight: 100;
  746. font-size: 14px;
  747. width: 100%;
  748. }
  749. .footer-2 .button {
  750. position: relative;
  751. display: inline-block;
  752. width: 30px;
  753. height: 30px;
  754. background-color: transparent;
  755. text-align: center;
  756. float: left;
  757. padding: 0 2%;
  758. }
  759. .footer-2 .button img {
  760. position: absolute;
  761. display: inline-block;
  762. width: 16px;
  763. height: 16px;
  764. top: 50%;
  765. left: 50%;
  766. transform: translate(-50%,-50%);
  767. }
  768. .footer-2 .middlelinks {
  769. position: relative;
  770. display: inline-block;
  771. width: 40%;
  772. float: left;
  773. }
  774. .footer-2 .middlelinks a {
  775. position: relative;
  776. display: inline-block;
  777. color: #ffffff;
  778. font-family: sans-serif;
  779. font-weight: 100;
  780. font-size: 14px;
  781. margin: 40px 0 0 0;
  782. padding: 0 10px;
  783. float: left;
  784. text-decoration: none;
  785. }
  786. .footer-2 .middlelinks a:nth-child(1) { border-right: 1px solid #ffffff; padding: 0 10px 0 0; }
  787. .footer-2 .middlelinks a:nth-child(2) { border-right: 1px solid #ffffff; }
  788. .footer-2 .middlelinks a:nth-child(3) { border-right: 1px solid #ffffff; }
  789. .footer-2 .copyright {
  790. position: relative;
  791. display: inline-block;
  792. width: 24%;
  793. float: left;
  794. }
  795. .footer-2 .copyright h2 {
  796. position: relative;
  797. display: inline-block;
  798. color: #ffffff;
  799. font-family: sans-serif;
  800. font-weight: 100;
  801. font-size: 14px;
  802. padding: 40px 0 0 0;
  803. width: 100%;
  804. float: left;
  805. text-align: center;
  806. }
  807.  
  808.  
  809. .header .nav-mobile-button {
  810. position: absolute;
  811. display: inline-block;
  812. right: 30px;
  813. top: 50%;
  814. height: 28px;
  815. width: 41px;
  816. transform: translate(-50%, -50%);
  817. background-color: transparent;
  818. opacity: 0; /* hidden and disable if not on phones*/
  819. display: none;
  820. z-index: 1;
  821. }
  822. .header .nav-mobile-button .line {
  823. position: absolute;
  824. display: inline-block;
  825. height: 4px;
  826. left: 0;
  827. width: 100%;
  828. background-color: #6e6e6e;
  829. margin: 0;
  830. float: none;
  831. }
  832. .header .nav-mobile-button .line.l1 { top: 0px; }
  833. .header .nav-mobile-button .line.l2 { top: 12px; }
  834. .header .nav-mobile-button .line.l3 { top: 24px; }
  835.  
  836.  
  837.  
  838. /* MEDIA QUERIES */
  839.  
  840.  
  841.  
  842. /* ----------------------------------------------------*/
  843. /* Code That Doesnt Change Between Mobile Resolution */
  844. /* ----------------------------------------------------*/
  845. @media only screen and (min-width : 0px) and (max-width : 992px) {
  846. .header .submenu { display: none; }
  847. .header .mainbutton1,
  848. .header .mainbutton2,
  849. .header .mainbutton3,
  850. .header .mainbutton4,
  851. .header .mainbutton5,
  852. .header .mainbutton6 { opacity: 0; display: none; }
  853. .header.navigation-toggled .mainbutton1,
  854. .header.navigation-toggled .mainbutton2,
  855. .header.navigation-toggled .mainbutton3,
  856. .header.navigation-toggled .mainbutton4,
  857. .header.navigation-toggled .mainbutton5,
  858. .header.navigation-toggled .mainbutton6 { opacity: 1; display: inline-block; }
  859. .header.navigation-toggled .mainbutton1 h2 { display: none; }
  860. .header.navigation-toggled .mainbutton2 h2 { display: none; }
  861. .header.navigation-toggled .mainbutton3 h2 { display: none; }
  862. .header.navigation-toggled .mainbutton1 { left: 50%; transform: translateX(-50%); top:0vh; padding: 0; margin: 0; text-align: center; width: 100%;}
  863. .header.navigation-toggled .mainbutton2 { left: 50%; transform: translateX(-50%); top:7vh; padding: 0; margin: 0; text-align: center; width: 100%;}
  864. .header.navigation-toggled .mainbutton3 { left: 50%; transform: translateX(-50%); top:14vh; padding: 0; margin: 0; text-align: center; width: 100%;}
  865. .header.navigation-toggled .mainbutton4 { left: 50%; transform: translateX(-50%); top:21vh; padding: 0; margin: 0; text-align: center; width: 100%;}
  866. .header.navigation-toggled .mainbutton5 { left: 50%; transform: translateX(-50%); top:28vh; padding: 0; margin: 0; text-align: center; width: 100%;}
  867. .header.navigation-toggled .mainbutton6 { left: 50%; transform: translateX(-50%); top:35vh; padding: 0; margin: 0; text-align: center; width: 100%;}
  868. .header.navigation-toggled:after,
  869. .header.navigation-toggled:before {
  870. content: ' ';
  871. position: absolute;
  872. display: block;
  873. top: 0;
  874. left: 0;
  875. width: 100vw;
  876. }
  877. .header.navigation-toggled:after {
  878. background-color: #e8e8e8;
  879. height: 100%;
  880. -webkit-box-shadow: -1vw 10px 38px 0px rgba(0, 0, 0, 0.13);
  881. -moz-box-shadow: -1vw 10px 38px 0px rgba(0, 0, 0, 0.13);
  882. box-shadow: -1vw 10px 38px 0px rgba(0, 0, 0, 0.13);
  883. }
  884. .header.navigation-toggled:before {
  885. background-color: rgb(229, 229, 229);
  886. height: 100vh;
  887. }
  888. .header .nav-mobile-button { opacity: 1; display: inline-block; }
  889. .header .nav-mobile-button .line.l1 { transition: transform 0.5s ease, opacity 0.5s ease; }
  890. .header .nav-mobile-button .line.l2 { transition: transform 0.5s ease, opacity 0.5s ease;3 }
  891. .header .nav-mobile-button .line.l3 { transition: transform 0.5s ease, opacity 0.5s ease; }
  892. .header .nav-mobile-button.toggled .line.l1{ transition: transform 0.5s ease; transform: translateY(12px) rotate(45deg); }
  893. .header .nav-mobile-button.toggled .line.l2{ transition: transform 0.5s ease; opacity: 0; }
  894. .header .nav-mobile-button.toggled .line.l3{ transition: transform 0.5s ease; transform: translateY(-12px) rotate(-45deg); }
  895. .header.navigation-toggled .side-navigation { display: none; }
  896. .header {
  897. height: 88px !important;
  898. -webkit-box-shadow: -1vw 10px 38px 0px rgba(0, 0, 0, 0.13);
  899. -moz-box-shadow: -1vw 10px 38px 0px rgba(0, 0, 0, 0.13);
  900. box-shadow: -1vw 10px 38px 0px rgba(0, 0, 0, 0.13);
  901. }
  902. .header .logocontainer img {
  903. position: absolute;
  904. top: 50%;
  905. transform: translateY(-50%);
  906. left: 20px;
  907. margin: 0;
  908. }
  909. .header .navigation .line { display: none !important; }
  910. .header .navigation-three { display: none; }
  911. .header .navigation { display: none; }
  912. .header.navigation-toggled .navigation { display: inline-block; position: absolute; width: 100%; left: 0; top: 88px; background-color: transparent; height: 1px; }
  913. .header.navigation-toggled .navigation-two { display: inline-block; position: absolute; width: 100%; left: 0; top: 88px; background-color: transparent; height: 1px; }
  914.  
  915. .footer { z-index: 10; }
  916. .footer-2 { z-index: 10; }
  917. }
  918.  
  919.  
  920. /* ----------------------------------------------------*/
  921. /* Custom, iPhone Retina */
  922. /* ----------------------------------------------------*/
  923. @media only screen and (max-width : 320px) {
  924. body::before {
  925. content: "max-width : 320px fired";
  926. display: block; text-align: center;
  927. background: rgba(255, 255, 0, 0.48); width: 100%;
  928. position: fixed;
  929. top: 0; left: 0;
  930. z-index: 9999;
  931. }
  932.  
  933. .container .footer { display: none; }
  934. .header.navigation-toggled .mainbutton1 h1,
  935. .header.navigation-toggled .mainbutton2 h1,
  936. .header.navigation-toggled .mainbutton3 h1,
  937. .header.navigation-toggled .mainbutton4 h1,
  938. .header.navigation-toggled .mainbutton5 h1,
  939. .header.navigation-toggled .mainbutton6 h1 { font-size: 10vw; opacity: 1; }
  940.  
  941. .container .footer { display: none; }
  942. .container .footer-2 .middlelinks { display: none; }
  943. .container .footer-2 .socialcontainer { text-align: center; width: 100%; }
  944. .container .footer-2 .socialcontainer .smallcont { margin-left: 0; width: 100%; }
  945. .container .footer-2 .socialcontainer .smallcont .socialbuttons { margin-left: 0; width: 100%; text-align: center; }
  946. .container .footer-2 .socialcontainer .smallcont .socialbuttons .button { float: none; border: 0; margin: 0 0; padding: 0; }
  947. .container .footer-2 .copyright { width: 100%; }
  948. .container .footer-2 .copyright h2 { padding: 0; }
  949.  
  950. }
  951.  
  952.  
  953. /* ----------------------------------------------------*/
  954. /* Extra Small Devices, Phones */
  955. /* ----------------------------------------------------*/
  956. @media only screen and (min-width : 320px) and (max-width : 480px) {
  957. body::before {
  958. content: "max-width : 480px fired";
  959. display: block; text-align: center;
  960. background: rgba(255, 255, 0, 0.48); width: 100%;
  961. position: fixed;
  962. top: 0; left: 0;
  963. z-index: 9999;
  964. }
  965.  
  966. .header.navigation-toggled .mainbutton1 h1,
  967. .header.navigation-toggled .mainbutton2 h1,
  968. .header.navigation-toggled .mainbutton3 h1,
  969. .header.navigation-toggled .mainbutton4 h1,
  970. .header.navigation-toggled .mainbutton5 h1,
  971. .header.navigation-toggled .mainbutton6 h1 { font-size: 5vw; opacity: 1; }
  972.  
  973. .container .footer { display: none; }
  974. .container .footer-2 .middlelinks { display: none; }
  975. .container .footer-2 .socialcontainer { text-align: center; width: 100%; }
  976. .container .footer-2 .socialcontainer .smallcont { margin-left: 0; width: 100%; }
  977. .container .footer-2 .socialcontainer .smallcont .socialbuttons { margin-left: 0; width: 100%; text-align: center; }
  978. .container .footer-2 .socialcontainer .smallcont .socialbuttons .button { float: none; border: 0; margin: 0 0; padding: 0; }
  979. .container .footer-2 .copyright { width: 100%; }
  980. .container .footer-2 .copyright h2 { padding: 0; }
  981. }
  982.  
  983.  
  984. /* ----------------------------------------------------*/
  985. /* Small Devices, Tablets */
  986. /* ----------------------------------------------------*/
  987. @media only screen and (min-width : 480px) and (max-width : 768px) {
  988. body::before {
  989. content: "max-width : 768px 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. .header.navigation-toggled .mainbutton1 h1,
  997. .header.navigation-toggled .mainbutton2 h1,
  998. .header.navigation-toggled .mainbutton3 h1,
  999. .header.navigation-toggled .mainbutton4 h1,
  1000. .header.navigation-toggled .mainbutton5 h1,
  1001. .header.navigation-toggled .mainbutton6 h1 { font-size: 4vw; opacity: 1; }
  1002.  
  1003. .container .footer { display: none; }
  1004. .container .footer-2 .middlelinks { display: none; }
  1005. .container .footer-2 .socialcontainer { width: 50%; }
  1006. .container .footer-2 .copyright { width: 50%; }
  1007. }
  1008.  
  1009.  
  1010. /* ----------------------------------------------------*/
  1011. /* Medium Devices, Desktops */
  1012. /* ----------------------------------------------------*/
  1013. @media only screen and (min-width : 768px) and (max-width : 992px) {
  1014. body::before {
  1015. content: "max-width : 992px fired";
  1016. display: block; text-align: center;
  1017. background: rgba(255, 255, 0, 0.48); width: 100%;
  1018. position: fixed;
  1019. top: 0; left: 0;
  1020. z-index: 9999;
  1021. }
  1022.  
  1023. .header.navigation-toggled .mainbutton1 h1,
  1024. .header.navigation-toggled .mainbutton2 h1,
  1025. .header.navigation-toggled .mainbutton3 h1,
  1026. .header.navigation-toggled .mainbutton4 h1,
  1027. .header.navigation-toggled .mainbutton5 h1,
  1028. .header.navigation-toggled .mainbutton6 h1 { font-size: 4vw; opacity: 1; }
  1029.  
  1030.  
  1031. .container .footer .container.logo { display: none; }
  1032. .container .footer .container.footerlinks { width: 100%; text-align: center; }
  1033. .container .footer .container.footerlinks .subcont { float: none; }
  1034. }
  1035.  
  1036.  
  1037. /* ----------------------------------------------------*/
  1038. /* Large Devices, Wide Screens */
  1039. /* ----------------------------------------------------*/
  1040. @media only screen and (min-width : 992px) and (max-width : 1200px) {
  1041. body::before {
  1042. content: "max-width : 1200px fired";
  1043. display: block; text-align: center;
  1044. background: rgba(255, 255, 0, 0.48); width: 100%;
  1045. position: fixed;
  1046. top: 0; left: 0;
  1047. z-index: 9999;
  1048. }
  1049.  
  1050. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!