API tools faq
paste
Advertisement
kuchuz

Tugas 4 PWEB-D style.css

kuchuz
Oct 27th, 2021
860
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 18.10 KB | None | 0 0
raw download clone embed print report
  1. body {
  2.   font-family: 'Poppins', sans-serif;
  3.   overflow-x: hidden;
  4.   text-rendering: optimizeLegibility;
  5.   -webkit-font-smoothing: antialiased;
  6.   -moz-osx-font-smoothing: grayscale;
  7. }
  8. p {
  9.     margin-bottom: 0px;
  10.     font-size: 14px;
  11.     font-weight: 300;
  12.     color: #4a4a4a;
  13.     line-height: 24px;
  14. }
  15. a {
  16.     text-decoration: none!important;
  17. }
  18. ul {
  19.     padding: 0;
  20.     margin: 0;
  21.     list-style: none;
  22. }
  23.  
  24. h1,h2,h3,h4,h5,h6 {
  25.     margin: 0px;
  26. }
  27.  
  28. ul.social-icons li {
  29.     display: inline-block;
  30.     margin-right: 3px;
  31. }
  32.  
  33. ul.social-icons li:last-child {
  34.     margin-right: 0px;
  35. }
  36.  
  37. ul.social-icons li a {
  38.     width: 50px;
  39.     height: 50px;
  40.     display: inline-block;
  41.     line-height: 50px;
  42.     background-color: #eee;
  43.     color: #121212;
  44.     font-size: 18px;
  45.     text-align: center;
  46.     transition: all .3s;
  47. }
  48.  
  49. ul.social-icons li a:hover {
  50.     background-color: #f33f3f;
  51.     color: #fff;
  52. }
  53.  
  54. a.filled-button {
  55.     background-color: #f33f3f;
  56.     color: #fff;
  57.     font-size: 14px;
  58.     text-transform: capitalize;
  59.     font-weight: 300;
  60.     padding: 10px 20px;
  61.     border-radius: 5px;
  62.     display: inline-block;
  63.     transition: all 0.3s;
  64. }
  65.  
  66. a.filled-button:hover {
  67.     background-color: #121212;
  68.     color: #fff;
  69. }
  70.  
  71. .section-heading {
  72.     text-align: left;
  73.     margin-bottom: 60px;
  74.     border-bottom: 1px solid #eee;
  75. }
  76.  
  77. .section-heading h2 {
  78.     font-size: 28px;
  79.     font-weight: 400;
  80.     color: #1e1e1e;
  81.     margin-bottom: 15px;
  82. }
  83.  
  84. .products-heading {
  85.     background-image: url(../images/products-heading.jpg);
  86. }
  87.  
  88. .about-heading {
  89.     background-image: url(../images/about-heading.jpg);
  90. }
  91.  
  92. .contact-heading {
  93.     background-image: url(../images/contact-heading.jpg);
  94. }
  95.  
  96. .page-heading {
  97.     padding: 210px 0px 130px 0px;
  98.     text-align: center;
  99.     background-position: center center;
  100.     background-repeat: no-repeat;
  101.     background-size: cover;
  102. }
  103.  
  104. .page-heading .text-content h4 {
  105.     color: #f33f3f;
  106.     font-size: 22px;
  107.     text-transform: uppercase;
  108.     font-weight: 700;
  109.     margin-bottom: 15px;
  110. }
  111.  
  112. .page-heading .text-content h2 {
  113.     color: #fff;
  114.     font-size: 62px;
  115.     text-transform: uppercase;
  116.     letter-spacing: 5px;
  117. }
  118.  
  119. #preloader {
  120.   overflow: hidden;
  121.   background: #f33f3f;
  122.   left: 0;
  123.   right: 0;
  124.   top: 0;
  125.   bottom: 0;
  126.   position: fixed;
  127.   z-index: 9999999;
  128.   color: #fff;
  129. }
  130.  
  131. #preloader .jumper {
  132.   left: 0;
  133.   top: 0;
  134.   right: 0;
  135.   bottom: 0;
  136.   display: block;
  137.   position: absolute;
  138.   margin: auto;
  139.   width: 50px;
  140.   height: 50px;
  141. }
  142.  
  143. #preloader .jumper > div {
  144.   background-color: #fff;
  145.   width: 10px;
  146.   height: 10px;
  147.   border-radius: 100%;
  148.   -webkit-animation-fill-mode: both;
  149.   animation-fill-mode: both;
  150.   position: absolute;
  151.   opacity: 0;
  152.   width: 50px;
  153.   height: 50px;
  154.   -webkit-animation: jumper 1s 0s linear infinite;
  155.   animation: jumper 1s 0s linear infinite;
  156. }
  157.  
  158. #preloader .jumper > div:nth-child(2) {
  159.   -webkit-animation-delay: 0.33333s;
  160.   animation-delay: 0.33333s;
  161. }
  162.  
  163. #preloader .jumper > div:nth-child(3) {
  164.   -webkit-animation-delay: 0.66666s;
  165.   animation-delay: 0.66666s;
  166. }
  167.  
  168. @-webkit-keyframes jumper {
  169.   0% {
  170.     opacity: 0;
  171.     -webkit-transform: scale(0);
  172.     transform: scale(0);
  173.   }
  174.   5% {
  175.     opacity: 1;
  176.   }
  177.   100% {
  178.     -webkit-transform: scale(1);
  179.     transform: scale(1);
  180.     opacity: 0;
  181.   }
  182. }
  183.  
  184. @keyframes jumper {
  185.   0% {
  186.     opacity: 0;
  187.     -webkit-transform: scale(0);
  188.     transform: scale(0);
  189.   }
  190.   5% {
  191.     opacity: 1;
  192.   }
  193.   100% {
  194.     opacity: 0;
  195.   }
  196. }
  197.  
  198.  
  199. /* Header Style */
  200. header {
  201.     position: absolute;
  202.     z-index: 99999;
  203.     width: 100%;
  204.     height: 80px;
  205.     background-color: #232323;
  206.     -webkit-transition: all 0.3s ease-in-out 0s;
  207.     -moz-transition: all 0.3s ease-in-out 0s;
  208.     -o-transition: all 0.3s ease-in-out 0s;
  209.     transition: all 0.3s ease-in-out 0s;
  210. }
  211. header .navbar {
  212.     padding: 17px 0px;
  213. }
  214. .background-header .navbar {
  215.     padding: 17px 0px;
  216. }
  217. .background-header {
  218.     top: 0;
  219.     position: fixed;
  220.     background-color: #fff!important;
  221.     box-shadow: 0px 1px 10px rgba(0,0,0,0.1);
  222. }
  223. .background-header .navbar-brand h2 {
  224.     color: #121212!important;
  225. }
  226. .background-header .navbar-nav a.nav-link {
  227.     color: #1e1e1e!important;
  228. }
  229. .background-header .navbar-nav .nav-link:hover,
  230. .background-header .navbar-nav .active>.nav-link,
  231. .background-header .navbar-nav .nav-link.active,
  232. .background-header .navbar-nav .nav-link.show,
  233. .background-header .navbar-nav .show>.nav-link {
  234.     color: #f33f3f!important;
  235. }
  236. .navbar .navbar-brand {
  237.     float:  left;
  238.     margin-top: -12px;
  239.     outline: none;
  240. }
  241. .navbar .navbar-brand h2 {
  242.     color: #fff;
  243.     text-transform: uppercase;
  244.     font-size: 24px;
  245.     font-weight: 700;
  246.     -webkit-transition: all .3s ease 0s;
  247.     -moz-transition: all .3s ease 0s;
  248.     -o-transition: all .3s ease 0s;
  249.     transition: all .3s ease 0s;
  250. }
  251. .navbar .navbar-brand h2 em {
  252.     font-style: normal;
  253.     color: #f33f3f;
  254. }
  255. #navbarResponsive {
  256.     z-index: 999;
  257. }
  258. .navbar-collapse {
  259.     text-align: center;
  260. }
  261. .navbar .navbar-nav .nav-item {
  262.     margin: 0px 15px;
  263. }
  264. .navbar .navbar-nav a.nav-link {
  265.     text-transform: capitalize;
  266.     font-size: 15px;
  267.     font-weight: 500;
  268.     letter-spacing: 0.5px;
  269.     color: #fff;
  270.     transition: all 0.5s;
  271.     margin-top: 5px;
  272. }
  273. .navbar .navbar-nav .nav-link:hover,
  274. .navbar .navbar-nav .active>.nav-link,
  275. .navbar .navbar-nav .nav-link.active,
  276. .navbar .navbar-nav .nav-link.show,
  277. .navbar .navbar-nav .show>.nav-link {
  278.     color: #fff;
  279.     padding-bottom: 25px;
  280.     border-bottom: 3px solid #f33f3f;
  281. }
  282. .navbar .navbar-toggler-icon {
  283.     background-image: none;
  284. }
  285. .navbar .navbar-toggler {
  286.     border-color: #fff;
  287.     background-color: #fff;
  288.     height: 36px;
  289.     outline: none;
  290.     border-radius: 0px;
  291.     position: absolute;
  292.     right: 30px;
  293.     top: 20px;
  294. }
  295. .navbar .navbar-toggler-icon:after {
  296.     content: '\f0c9';
  297.     color: #f33f3f;
  298.     font-size: 18px;
  299.     line-height: 26px;
  300.     font-family: 'FontAwesome';
  301. }
  302.  
  303.  
  304.  
  305. /* Banner Style */
  306. .banner {
  307.     position: relative;
  308.     text-align: center;
  309.     padding-top: 80px;
  310. }
  311.  
  312. .banner-item-01 {
  313.     padding: 300px 0px;
  314.     background-image: url(../images/slide_01.jpg);
  315.     background-size: cover;
  316.     background-repeat: no-repeat;
  317.     background-position: center center;
  318. }
  319.  
  320. .banner-item-02 {
  321.     padding: 300px 0px;
  322.     background-image: url(../images/slide_02.jpg);
  323.     background-size: cover;
  324.     background-repeat: no-repeat;
  325.     background-position: center center;
  326. }
  327.  
  328. .banner-item-03 {
  329.     padding: 300px 0px;
  330.     background-image: url(../images/slide_03.jpg);
  331.     background-size: cover;
  332.     background-repeat: no-repeat;
  333.     background-position: center center;
  334. }
  335.  
  336. .banner .banner-item {
  337.     max-height: 600px;
  338. }
  339.  
  340. .banner .text-content {
  341.     position: absolute;
  342.     top: 50%;
  343.     transform: translateY(-50%);
  344.     text-align: center;
  345.     width: 100%;
  346. }
  347.  
  348. .banner .text-content h4 {
  349.     color: #f33f3f;
  350.     font-size: 22px;
  351.     text-transform: uppercase;
  352.     font-weight: 700;
  353.     margin-bottom: 15px;
  354. }
  355.  
  356. .banner .text-content h2 {
  357.     color: #fff;
  358.     font-size: 62px;
  359.     text-transform: uppercase;
  360.     letter-spacing: 5px;
  361. }
  362.  
  363. .owl-banner .owl-dots .owl-dot {
  364.   border-radius: 3px;
  365. }
  366. .owl-banner .owl-dots {
  367.     display: -webkit-box;
  368.     display: -webkit-flex;
  369.     display: -ms-flexbox;
  370.     display: flex;
  371.     -ms-flex-pack: center;
  372.     -webkit-justify-content: center;
  373.     justify-content: center;
  374.     position: absolute;
  375.     left: 50%;
  376.     transform: translateX(-50%);
  377.     bottom: 30px;
  378. }
  379. .owl-banner .owl-dots .owl-dot {
  380.     width: 10px;
  381.     height: 10px;
  382.     border-radius: 50%;
  383.     margin: 0 10px;
  384.     background-color: #fff;
  385.     opacity: 0.5;
  386. }
  387. .owl-banner .owl-dots .owl-dot:focus {
  388.     outline: none
  389. }
  390. .owl-banner .owl-dots .owl-dot.active {
  391.     background-color: #fff;
  392.     opacity: 1;
  393. }
  394.  
  395.  
  396.  
  397. /* Latest Produtcs */
  398.  
  399. .latest-products {
  400.     margin-top: 100px;
  401. }
  402.  
  403. .latest-products .section-heading a {
  404.     float: right;
  405.     margin-top: -35px;
  406.     text-transform: uppercase;
  407.     font-size: 13px;
  408.     font-weight: 700;
  409.     color: #f33f3f;
  410. }
  411.  
  412. .product-item {
  413.     border: 1px solid #eee;
  414.     margin-bottom: 30px;
  415. }
  416.  
  417. .product-item .down-content {
  418.     padding: 30px;
  419.     position: relative;
  420. }
  421.  
  422. .product-item img {
  423.     width: 100%;
  424.     overflow: hidden;
  425. }
  426.  
  427. .product-item .down-content h4 {
  428.     font-size: 17px;
  429.     color: #1a6692;
  430.     margin-bottom: 20px;
  431. }
  432.  
  433. .product-item .down-content h6 {
  434.     position: absolute;
  435.     top: 30px;
  436.     right: 30px;
  437.     font-size: 18px;
  438.     color: #121212;
  439. }
  440.  
  441. .product-item .down-content p {
  442.     margin-bottom: 20px;
  443. }
  444.  
  445. .product-item .down-content ul li {
  446.     display: inline-block;
  447. }
  448.  
  449. .product-item .down-content ul li i {
  450.     color: #f33f3f;
  451.     font-size: 14px;
  452. }
  453.  
  454. .product-item .down-content span {
  455.     position: absolute;
  456.     right: 30px;
  457.     bottom: 30px;
  458.     font-size: 13px;
  459.     color: #f33f3f;
  460.     font-weight: 500;
  461. }
  462.  
  463.  
  464.  
  465.  
  466. /* Best Features */
  467.  
  468. .about-features {
  469.     margin-top: 100px!important;
  470. }
  471.  
  472. .about-features p {
  473.     border-bottom: 1px solid #eee;
  474.     padding-bottom: 20px;
  475. }
  476.  
  477. .about-features .container .row {
  478.     padding-bottom: 0px!important;
  479.     border-bottom: none!important;
  480. }
  481.  
  482. .best-features {
  483.     margin-top: 50px;
  484. }
  485.  
  486. .best-features .container .row {
  487.     border-bottom: 1px solid #eee;
  488.     padding-bottom: 60px;
  489. }
  490.  
  491. .best-features img {
  492.     width: 100%;
  493.     overflow: hidden;
  494. }
  495.  
  496. .best-features h4 {
  497.     font-size: 17px;
  498.     color: #1a6692;
  499.     margin-bottom: 20px;
  500. }
  501.  
  502. .best-features ul.featured-list li {
  503.     display: block;
  504.     margin-bottom: 10px;
  505. }
  506.  
  507. .best-features p {
  508.     margin-bottom: 25px;
  509. }
  510.  
  511. .best-features ul.featured-list li a {
  512.     font-size: 14px;
  513.     color: #4a4a4a;
  514.     font-weight: 300;
  515.     transition: all .3s;
  516.     position: relative;
  517.     padding-left: 13px;
  518. }
  519.  
  520. .best-features ul.featured-list li a:before {
  521.     content: '';
  522.     width: 5px;
  523.     height: 5px;
  524.     display: inline-block;
  525.     background-color: #4a4a4a;
  526.     position: absolute;
  527.     left: 0;
  528.     transition: all .3s;
  529.     top: 8px;
  530. }
  531.  
  532. .best-features ul.featured-list li a:hover {
  533.     color: #f33f3f;
  534. }
  535.  
  536. .best-features ul.featured-list li a:hover::before {
  537.     background-color: #f33f3f;
  538. }
  539.  
  540. .best-features .filled-button {
  541.     margin-top: 20px;
  542. }
  543.  
  544.  
  545.  
  546.  
  547.  
  548. /* Call To Action */
  549.  
  550. .call-to-action .inner-content {
  551.     margin-top: 60px;
  552.     padding: 30px;
  553.     background-color: #f7f7f7;
  554.     border-radius: 5px;
  555. }
  556.  
  557. .call-to-action .inner-content h4 {
  558.     font-size: 17px;
  559.     color: #1a6692;
  560.     margin-bottom: 15px;
  561. }
  562.  
  563. .call-to-action .inner-content em {
  564.     font-style: normal;
  565.     font-weight: 700;
  566. }
  567.  
  568. .call-to-action .inner-content .col-md-4 {
  569.     text-align: right;
  570. }
  571.  
  572. .call-to-action .inner-content .filled-button {
  573.     margin-top: 12px;
  574. }
  575.  
  576.  
  577.  
  578.  
  579. /* Footer */
  580.  
  581. footer {
  582.     text-align: center;
  583. }
  584.  
  585. footer .inner-content {
  586.     border-top: 1px solid #eee;
  587.     margin-top: 60px;
  588.     padding: 60px 0px;
  589. }
  590.  
  591. footer .inner-content p {
  592.     text-transform: uppercase;
  593. }
  594.  
  595. footer .inner-content p a {
  596.     color: #f33f3f;
  597.     margin-left: 3px;
  598. }
  599.  
  600.  
  601.  
  602.  
  603. /* Product Page */
  604.  
  605. .products {
  606.     margin-top: 100px;
  607. }
  608.  
  609. .products .filters {
  610.     text-align: center;
  611.     border-bottom: 1px solid #eee;
  612.     padding-bottom: 10px;
  613.     margin-bottom: 60px;
  614. }
  615.  
  616. .products .filters li {
  617.     text-transform: uppercase;
  618.     font-size: 13px;
  619.     font-weight: 700;
  620.     color: #121212;
  621.     display: inline-block;
  622.     margin: 0px 10px;
  623.     transition: all .3s;
  624.     cursor: pointer;
  625. }
  626.  
  627. .products .filters ul li.active,
  628. .products .filters ul li:hover {
  629.   color: #f33f3f;
  630. }
  631.  
  632. .products ul.pages {
  633.     margin-top: 30px;
  634.     text-align: center;
  635. }
  636.  
  637. .products ul.pages li {
  638.     display: inline-block;
  639.     margin: 0px 2px;
  640. }
  641.  
  642. .products ul.pages li a {
  643.     width: 44px;
  644.     height: 44px;
  645.     display: inline-block;
  646.     line-height: 42px;
  647.     border: 1px solid #eee;
  648.     font-size: 15px;
  649.     font-weight: 700;
  650.     color: #121212;
  651.     transition: all .3s;
  652. }
  653.  
  654. .products ul.pages li a:hover,
  655. .products ul.pages li.active a {
  656.     background-color: #f33f3f;
  657.     border-color: #f33f3f;
  658.     color: #fff;
  659. }
  660.  
  661.  
  662.  
  663. /* Team Members */
  664.  
  665. .team-members {
  666.     margin-top: 100px;
  667. }
  668.  
  669. .team-member {
  670.     border: 1px solid #eee;
  671.     margin-bottom: 30px;
  672. }
  673.  
  674. .team-member img {
  675.     width: 100%;
  676.     overflow: hidden;
  677. }
  678.  
  679. .team-member .down-content {
  680.     padding: 30px;
  681.     text-align: center;
  682. }
  683.  
  684. .team-member .thumb-container {
  685.     position: relative;
  686. }
  687.  
  688. .team-member .thumb-container .hover-effect {
  689.     position: absolute;
  690.     background-color: rgba(243,63,63,0.9);
  691.     top: 0;
  692.     left: 0;
  693.     width: 100%;
  694.     height: 100%;
  695.     opacity: 0;
  696.     visibility: hidden;
  697.     transition: all .5s;
  698. }
  699.  
  700. .team-member .thumb-container .hover-effect .hover-content {
  701.     position: absolute;
  702.     display: inline-block;
  703.     width: 100%;
  704.     text-align: center;
  705.     top: 50%;
  706.     transform: translateY(-50%);
  707. }
  708.  
  709. .team-member .thumb-container .hover-effect .hover-content ul.social-icons li a:hover {
  710.     background-color: #fff;
  711.     color: #f33f3f;
  712. }
  713.  
  714. .team-member:hover .hover-effect {
  715.     visibility: visible;
  716.     opacity: 1;
  717. }
  718.  
  719. .team-member .down-content h4 {
  720.     font-size: 17px;
  721.     color: #1a6692;
  722.     margin-bottom: 8px;
  723. }
  724.  
  725. .team-member .down-content span {
  726.     display: block;
  727.     font-size: 13px;
  728.     color: #f33f3f;
  729.     font-weight: 500;
  730.     margin-bottom: 20px;
  731. }
  732.  
  733.  
  734.  
  735.  
  736. /* Services */
  737.  
  738. .services {
  739.     background-image: url(../images/services-bg.jpg);
  740.     background-position: center center;
  741.     background-repeat: no-repeat;
  742.     background-size: cover;
  743.     background-attachment: fixed;
  744.     padding: 100px 0px;
  745. }
  746.  
  747. .services .service-item {
  748.     text-align: center;
  749. }
  750.  
  751. .services .service-item .icon {
  752.     background-color: #f7f7f7;
  753.     padding: 40px;
  754. }
  755.  
  756. .services .service-item .icon i {
  757.     width: 100px;
  758.     height: 100px;
  759.     display: inline-block;
  760.     text-align: center;
  761.     line-height: 100px;
  762.     background-color: #f33f3f;
  763.     color: #fff;
  764.     font-size: 32px;
  765. }
  766.  
  767. .services .service-item .down-content {
  768.     background-color: #fff;
  769.     padding: 40px 30px;
  770. }
  771.  
  772. .services .service-item .down-content h4 {
  773.     font-size: 17px;
  774.     color: #1a6692;
  775.     margin-bottom: 20px;
  776. }
  777.  
  778. .services .service-item .down-content p {
  779.     margin-bottom: 25px;
  780. }
  781.  
  782.  
  783.  
  784.  
  785. /* Clients */
  786.  
  787. .happy-clients {
  788.     margin-top: 100px;
  789.     margin-bottom: 40px;
  790. }
  791.  
  792. .happy-clients .client-item img {
  793.     max-width: 100%;
  794.     overflow: hidden;
  795.     transition: all .3s;
  796.     cursor: pointer;
  797. }
  798.  
  799. .happy-clients .client-item img:hover {
  800.     opacity: 0.8;
  801. }
  802.  
  803.  
  804.  
  805.  
  806. /* Find Us */
  807.  
  808. .find-us {
  809.     margin-top: 100px;
  810. }
  811.  
  812. .find-us p {
  813.     border-bottom: 1px solid #eee;
  814.     padding-bottom: 30px;
  815.     margin-bottom: 30px;
  816. }
  817.  
  818. .find-us h4 {
  819.     font-size: 17px;
  820.     color: #1a6692;
  821.     margin-bottom: 20px;
  822. }
  823.  
  824. .find-us .left-content {
  825.     margin-left: 30px;
  826. }
  827.  
  828.  
  829.  
  830. /* Send Message */
  831.  
  832. .send-message {
  833.     margin-top: 100px;
  834. }
  835.  
  836. .contact-form input {
  837.     font-size: 14px;
  838.     width: 100%;
  839.     height: 44px;
  840.     display: inline-block;
  841.     line-height: 42px;
  842.     border: 1px solid #eee;
  843.     border-radius: 0px;
  844.     margin-bottom: 30px;
  845. }
  846.  
  847. .contact-form input:focus {
  848.     box-shadow: none;
  849.     border: 1px solid #eee;
  850. }
  851.  
  852. .contact-form textarea {
  853.     font-size: 14px;
  854.     width: 100%;
  855.     min-width: 100%;
  856.     min-height: 120px;
  857.     height: 120px;
  858.     max-height: 180px;
  859.     border: 1px solid #eee;
  860.     border-radius: 0px;
  861.     margin-bottom: 30px;
  862. }
  863.  
  864. .contact-form textarea:focus {
  865.     box-shadow: none;
  866.     border: 1px solid #eee;
  867. }
  868.  
  869. .contact-form button.filled-button {
  870.     background-color: #f33f3f;
  871.     color: #fff;
  872.     font-size: 14px;
  873.     text-transform: capitalize;
  874.     font-weight: 300;
  875.     padding: 10px 20px;
  876.     border-radius: 5px;
  877.     display: inline-block;
  878.     transition: all 0.3s;
  879.     border: none;
  880.     outline: none;
  881.     cursor: pointer;
  882. }
  883.  
  884. .contact-form button.filled-button:hover {
  885.     background-color: #121212;
  886.     color: #fff;
  887. }
  888.  
  889. .accordion {
  890.     margin-left: 30px;
  891. }
  892.  
  893. .accordion a {
  894.     cursor: pointer;
  895.     font-size: 17px;
  896.     color: #1a6692!important;
  897.     margin-bottom: 20px;
  898.     transition: all .3s;
  899. }
  900.  
  901. .accordion a:hover {
  902.     color: #f33f3f!important;
  903. }
  904.  
  905. .accordion a.active {
  906.   color: #f33f3f!important;
  907. }
  908.  
  909. .accordion li .content {
  910.   display: none;
  911.   margin-top: 10px;
  912. }
  913.  
  914. .accordion li:first-child {
  915.     border-top: 1px solid #eee;
  916. }
  917.  
  918. .accordion li {
  919.     border-bottom: 1px solid #eee;
  920.     padding: 15px 0px;
  921. }
  922.  
  923. /* Responsive Style */
  924. @media (max-width: 768px) {
  925.     .banner .text-content {
  926.         width: 90%;
  927.         margin-left: 5%;
  928.     }
  929.     .banner .text-content h4 {
  930.         font-size: 22px;
  931.     }
  932.  
  933.     .banner .text-content h2 {
  934.         font-size: 36px;
  935.         letter-spacing: 0.5px;
  936.     }
  937.     .banner-item-01,
  938.     .banner-item-02,
  939.     .banner-item-03 {
  940.         padding: 180px 0px;
  941.     }
  942.     .page-heading .text-content h4 {
  943.         font-size: 22px;
  944.     }
  945.  
  946.     .page-heading .text-content h2 {
  947.         font-size: 36px;
  948.         letter-spacing: 0.5px;
  949.     }
  950.     .latest-products .section-heading a {
  951.         float: none;
  952.         margin-top: 0px;
  953.         display: block;
  954.         margin-bottom: 20px;
  955.     }
  956.     .product-item .down-content h4 {
  957.         margin-bottom: 20px!important;
  958.     }
  959.     .product-item .down-content h6 {
  960.         position: absolute!important;
  961.         top: 30px!important;
  962.         right: 30px!important;
  963.     }
  964.     .product-item .down-content span {
  965.         position: absolute!important;
  966.         right: 30px!important;
  967.         bottom: 30px!important;
  968.     }
  969.     .best-features .left-content {
  970.         margin-bottom: 30px;
  971.     }
  972.     .call-to-action .inner-content {
  973.         text-align: center;
  974.     }
  975.     .call-to-action .inner-content .filled-button {
  976.         text-align: center;
  977.         width: 100%;
  978.         margin-top: 20px;
  979.     }
  980.     .about-features img {
  981.         margin-bottom: 30px;
  982.     }
  983.     .service-item {
  984.         margin-bottom: 30px;
  985.     }
  986.     .find-us #map {
  987.         margin-bottom: 30px;
  988.     }
  989.     .find-us .left-content {
  990.         margin-left: 0px;
  991.     }
  992.     .send-message .accordion {
  993.         margin-top: 30px;
  994.         margin-left: 0px;
  995.     }
  996. }
  997.  
  998. @media (max-width: 992px) {
  999.     .navbar .navbar-brand {
  1000.         position: absolute;
  1001.         left: 30px;
  1002.         top: 32px;
  1003.     }
  1004.     .navbar .navbar-brand {
  1005.         width: auto;
  1006.     }
  1007.     .navbar:after {
  1008.         display: none;
  1009.     }
  1010.     #navbarResponsive {
  1011.         z-index: 99999;
  1012.         position: absolute;
  1013.         top: 80px;
  1014.         left: 0;
  1015.         width: 100%;
  1016.         text-align: center;
  1017.         background-color: #fff;
  1018.         box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
  1019.     }
  1020.     .navbar .navbar-nav .nav-item {
  1021.         border-bottom: 1px solid #eee;
  1022.     }
  1023.     .navbar .navbar-nav .nav-item:last-child {
  1024.         border-bottom: none;
  1025.     }
  1026.     .navbar .navbar-nav a.nav-link {
  1027.         padding: 15px 0px;
  1028.         color: #1e1e1e!important;
  1029.     }
  1030.     .navbar .navbar-nav .nav-link:hover,
  1031.     .navbar .navbar-nav .active>.nav-link,
  1032.     .navbar .navbar-nav .nav-link.active,
  1033.     .navbar .navbar-nav .nav-link.show,
  1034.     .navbar .navbar-nav .show>.nav-link {
  1035.         color: #f33f3f!important;
  1036.         border-bottom: none!important;
  1037.         padding-bottom: 15px;
  1038.     }
  1039.     .product-item .down-content h4 {
  1040.         margin-bottom: 10px;
  1041.     }
  1042.     .product-item .down-content h6 {
  1043.         position: relative;
  1044.         top: 0;
  1045.         right: 0;
  1046.         margin-bottom: 20px;
  1047.     }
  1048.     .product-item .down-content span {
  1049.         position: relative;
  1050.         right: 0;
  1051.         bottom: 0;
  1052.     }
  1053. }
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!